feat(webapp): add tracing page #1433

dogfrogfog · 2022-08-22T19:43:21Z

Brief

docs.google

Changes

add /exemplars/single page
rename /tracing -> /exemplars/merge
add heatmap component
add selection to heatmap compoent
fetch flamegraph with heatmap selected area values

Concerns

resize bug

CLAassistant · 2022-08-23T12:49:46Z

All committers have signed the CLA.

* add temporary json to display heatmap * add heatmap settings and display temporary json as a heatmap * fix heatmap axis styles and active cell styles * document the series input data format * print the clicked item coordinates (x, y)

codecov · 2022-08-23T13:21:27Z

Codecov Report

Merging #1433 (cbbe772) into main (f56fbb0) will decrease coverage by 2.32%.
The diff coverage is 44.94%.

@@            Coverage Diff             @@
##             main    #1433      +/-   ##
==========================================
- Coverage   68.61%   66.29%   -2.31%     
==========================================
  Files         132      139       +7     
  Lines        4360     4752     +392     
  Branches     1179     1288     +109     
==========================================
+ Hits         2991     3150     +159     
- Misses       1363     1597     +234     
+ Partials        6        5       -1

Impacted Files	Coverage Δ
webapp/javascript/services/render.ts	`17.18% <9.68%> (-2.27%)`	⬇️
webapp/javascript/redux/reducers/tracing.ts	`20.62% <20.00%> (ø)`
...ipt/components/Heatmap/useHeatmapSelection.hook.ts	`32.96% <32.96%> (ø)`
webapp/javascript/components/Heatmap/utils.ts	`35.49% <35.49%> (ø)`
.../javascript/components/Heatmap/Heatmap.module.scss	`61.54% <61.54%> (ø)`
webapp/javascript/components/Heatmap/index.tsx	`74.72% <74.72%> (ø)`
webapp/javascript/components/Heatmap/constants.ts	`100.00% <100.00%> (ø)`
webapp/javascript/components/Sidebar.tsx	`86.82% <100.00%> (+1.42%)`	⬆️
webapp/javascript/pages/constants.ts	`100.00% <100.00%> (ø)`
webapp/javascript/services/exemplarsTestData.ts	`100.00% <100.00%> (ø)`
... and 3 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

github-actions · 2022-08-23T13:32:51Z

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
webapp/public/assets/app.js	428.76 KB (+1.71% 🔺)	8.6 s (+1.71% 🔺)	3.2 s (-1.74% 🔽)	11.7 s
webapp/public/assets/app.css	16.28 KB (+2.56% 🔺)	326 ms (+2.56% 🔺)	0 ms (+100% 🔺)	326 ms
webapp/public/assets/styles.css	9.49 KB (0%)	190 ms (0%)	0 ms (+100% 🔺)	190 ms
packages/pyroscope-flamegraph/dist/index.js	92.08 KB (0%)	1.9 s (0%)	1.1 s (-25.98% 🔽)	2.9 s
packages/pyroscope-flamegraph/dist/index.node.js	91.97 KB (0%)	1.9 s (0%)	554 ms (+35.8% 🔺)	2.4 s
packages/pyroscope-flamegraph/dist/index.css	7.32 KB (0%)	147 ms (0%)	0 ms (+100% 🔺)	147 ms

eh-am · 2022-08-23T16:43:38Z

/create-server

dogfrogfog · 2022-08-26T16:23:38Z

Monosnap.screencast.2022-08-26.19-20-47.mp4

Rperry2174 · 2022-08-26T16:42:53Z

/create-server

* add area selection * add click selection * add bucket items colors * add resizable selected area

dogfrogfog · 2022-08-31T17:28:28Z

/create-server

* add /api/exemplars:query?query=app{} response data (datasetA)

dogfrogfog · 2022-09-12T07:48:17Z

/create-server

Rperry2174 · 2022-09-12T19:10:41Z

/create-server

Rperry2174 · 2022-09-12T19:13:04Z

webapp/javascript/services/render.ts

@@ -70,6 +70,7 @@ interface mergeWithQueryIDProps {
  maxNodes: string | number;
 }

+// z.infer<typeof MergeMetadataSchema> ?


do we still need this here

Rperry2174 · 2022-09-12T19:13:31Z

webapp/javascript/services/render.ts

+    signal?: AbortSignal;
+  }
+): Promise<Result<HeatmapOutput, RequestError | ZodError>> {
+  // todo use common builder


If you're going to leave this comment here can you elaborate on what you mean by this?

Rperry2174 · 2022-09-12T19:15:18Z

webapp/javascript/components/Heatmap/Heatmap.spec.tsx

+    const [minTextEl, maxTextEl] = within(
+      screen.getByTestId('color-scale')
+    ).getAllByRole('textbox');
+    // expect(minTextEl.textContent).toBe(`${exemplarsQueryHeatmap.minDepth - 1}`);


Do we need these here?

Rperry2174 · 2022-09-12T19:15:38Z

webapp/javascript/components/Heatmap/Heatmap.spec.tsx

+  }),
+}));
+
+// TODO(dogfrogfog): refactor


refactor in what way?

eh-am

Wow, Looks good and quite impressive!!

I would like to see the boundaries more clear though:
A generic Heatmap that you pass data and callback events. Right now it's too intertwined with tracing stuff. As an illustration, the HeatMap component should know nothing about the redux store or its state. It should just receive heatmapData (in whatever format it has) and its callbacks (onSelection I guess?).

eh-am · 2022-09-12T19:22:25Z

webapp/javascript/components/Heatmap/Heatmap.spec.tsx

+}));
+
+// TODO(dogfrogfog): refactor
+describe.skip('Component: Heatmap', () => {


shouldn't be skipped

eh-am · 2022-09-12T19:30:39Z

webapp/javascript/services/render.ts

+    (acc, [key, value]) => acc + (acc ? `&${key}=${value}` : `${key}=${value}`),
+    ''
+  );
+  const response = await request(`/api/exemplars:query?${queryString}`, {


@kolesnikovae I am curious about the usage of : in a url?

webapp/javascript/services/render.ts

webapp/javascript/services/exemplarsTestData.ts

eh-am · 2022-09-12T19:35:10Z

webapp/javascript/redux/reducers/tracing.ts

+      state.heatmapSingleView = {
+        ...action.payload,
+        // refactor types
+        heatmap: state.heatmapSingleView.heatmap as Heatmap,


Why is this assertion needed?

webapp/javascript/redux/reducers/tracing.ts

eh-am · 2022-09-12T19:44:04Z

webapp/javascript/components/Heatmap/useHeatmapSelection.hook.ts

+  useEffect(() => {
+    if (from && until && query) {
+      const fetchData = dispatch(
+        fetchHeatmapSingleView({
+          query,
+          from,
+          until,
+          ...DEFAULT_HEATMAP_PARAMS,
+        })
+      );
+      return () => fetchData.abort('cancel');
+    }
+    return undefined;
+  }, [from, until, query]);


I think this is waaaay too much functionality for this single hook. Let's move data fetching to the component/another hook.

Co-authored-by: eduardo aleixo <eh-am@users.noreply.github.com>

* remove comments * use URLSearchParams to build query params * refactor tracing state

* tests * add onSelect handler to Heatmap props

dogfrogfog · 2022-09-13T12:51:15Z

/create-server

Rperry2174 · 2022-09-13T16:12:59Z

/create-server

Rperry2174

LGTM! Nice work @dogfrogfog

dogfrogfog added 2 commits August 18, 2022 20:12

feat: add basic tracing page setup

c1ea02f

feat: add heatmap component

c79a936

dogfrogfog changed the title ~~feat: add tracing page~~ feat(webapp): add tracing page Aug 22, 2022

github-actions bot added the has conflicts label Aug 22, 2022

feat: add heatmap component

fc82933

* add temporary json to display heatmap * add heatmap settings and display temporary json as a heatmap * fix heatmap axis styles and active cell styles * document the series input data format * print the clicked item coordinates (x, y)

dogfrogfog force-pushed the feature/add-tracing-page branch from 83b36bb to fc82933 Compare August 23, 2022 12:54

Merge branch 'main' into feature/add-tracing-page

1d3c7df

dogfrogfog force-pushed the feature/add-tracing-page branch from 5bc7c76 to 1d3c7df Compare August 23, 2022 13:17

fix: add missing package

0c10dd1

dogfrogfog removed the has conflicts label Aug 23, 2022

dogfrogfog added 3 commits August 26, 2022 16:17

feat: remove apexcharts, add native heatmap

fd95c92

feat: add axis templates

bf696ff

feat: print selected area coordinates to console

a8908b8

dogfrogfog added 2 commits August 29, 2022 11:27

feat: add useHeatmapSelect Hook

3552aea

feat: add axis values

62a62c9

github-actions bot added the has conflicts label Aug 31, 2022

feat: add heatmap selection + styles

f4841a2

* add area selection * add click selection * add bucket items colors * add resizable selected area

dogfrogfog and others added 3 commits September 1, 2022 16:04

refactor

3d2091a

feat: add heatmap test setup

0a42da9

Merge branch 'main' into feature/add-tracing-page

ec22af2

dogfrogfog removed the has conflicts label Sep 1, 2022

dogfrogfog added 2 commits September 3, 2022 20:19

refactor: separate heatmap into separate page for development

848c008

* add /api/exemplars:query?query=app{} response data (datasetA)

fix: heatmap orientation

d3e1bc4

fix: tracing merge exemplars page route and sidebar title

cbc08d3

fix: should not handle empty cell click

7a85222

dogfrogfog marked this pull request as ready for review September 12, 2022 11:43

dogfrogfog requested review from petethepig, eh-am and Rperry2174 September 12, 2022 11:47

fix: minValue for clicked Y-axis bottom edge cells

eff65b1

Rperry2174 reviewed Sep 12, 2022

View reviewed changes

eh-am reviewed Sep 12, 2022

View reviewed changes

dogfrogfog and others added 7 commits September 13, 2022 07:50

Update webapp/javascript/redux/reducers/tracing.ts

874a9d7

Co-authored-by: eduardo aleixo <eh-am@users.noreply.github.com>

Update webapp/javascript/redux/reducers/tracing.ts

b1dda7e

Co-authored-by: eduardo aleixo <eh-am@users.noreply.github.com>

fix: review

b5c7dea

* remove comments * use URLSearchParams to build query params * refactor tracing state

fix: move data fetching from useHeatmapSelection

0fe13c7

fix: review

aa8e4b7

* tests * add onSelect handler to Heatmap props

fix: prop names

074afb5

feat: add viridis colors palette

10b6b45

fix: reverse colors

1ed8178

github-actions bot added the has conflicts label Sep 13, 2022

Merge branch 'main' into feature/add-tracing-page

cbbe772

dogfrogfog removed the has conflicts label Sep 13, 2022

Rperry2174 approved these changes Sep 13, 2022

View reviewed changes

Rperry2174 merged commit 587379a into main Sep 13, 2022

Rperry2174 deleted the feature/add-tracing-page branch September 13, 2022 19:25

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(webapp): add tracing page #1433

feat(webapp): add tracing page #1433

dogfrogfog commented Aug 22, 2022 •

edited

Loading

CLAassistant commented Aug 23, 2022 •

edited

Loading

codecov bot commented Aug 23, 2022 •

edited

Loading

github-actions bot commented Aug 23, 2022 •

edited

Loading

eh-am commented Aug 23, 2022

dogfrogfog commented Aug 26, 2022

Rperry2174 commented Aug 26, 2022

dogfrogfog commented Aug 31, 2022

dogfrogfog commented Sep 12, 2022

Rperry2174 commented Sep 12, 2022

Rperry2174 Sep 12, 2022

Rperry2174 Sep 12, 2022

Rperry2174 Sep 12, 2022

Rperry2174 Sep 12, 2022 •

edited

Loading

eh-am left a comment

eh-am Sep 12, 2022

eh-am Sep 12, 2022

eh-am Sep 12, 2022

eh-am Sep 12, 2022

dogfrogfog commented Sep 13, 2022

Rperry2174 commented Sep 13, 2022

Rperry2174 left a comment

feat(webapp): add tracing page #1433

feat(webapp): add tracing page #1433

Conversation

dogfrogfog commented Aug 22, 2022 • edited Loading

Brief

Changes

Concerns

CLAassistant commented Aug 23, 2022 • edited Loading

codecov bot commented Aug 23, 2022 • edited Loading

Codecov Report

github-actions bot commented Aug 23, 2022 • edited Loading

size-limit report 📦

eh-am commented Aug 23, 2022

dogfrogfog commented Aug 26, 2022

Rperry2174 commented Aug 26, 2022

dogfrogfog commented Aug 31, 2022

dogfrogfog commented Sep 12, 2022

Rperry2174 commented Sep 12, 2022

Rperry2174 Sep 12, 2022

Choose a reason for hiding this comment

Rperry2174 Sep 12, 2022

Choose a reason for hiding this comment

Rperry2174 Sep 12, 2022

Choose a reason for hiding this comment

Rperry2174 Sep 12, 2022 • edited Loading

Choose a reason for hiding this comment

eh-am left a comment

Choose a reason for hiding this comment

eh-am Sep 12, 2022

Choose a reason for hiding this comment

eh-am Sep 12, 2022

Choose a reason for hiding this comment

eh-am Sep 12, 2022

Choose a reason for hiding this comment

eh-am Sep 12, 2022

Choose a reason for hiding this comment

dogfrogfog commented Sep 13, 2022

Rperry2174 commented Sep 13, 2022

Rperry2174 left a comment

Choose a reason for hiding this comment

dogfrogfog commented Aug 22, 2022 •

edited

Loading

CLAassistant commented Aug 23, 2022 •

edited

Loading

codecov bot commented Aug 23, 2022 •

edited

Loading

github-actions bot commented Aug 23, 2022 •

edited

Loading

Rperry2174 Sep 12, 2022 •

edited

Loading