Skip to content

feat(insights): Refactor chart widgets to pass down prop overrides #89455

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.

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

Merged
merged 5 commits into from
Apr 15, 2025

Conversation

billyvg
Copy link
Member

@billyvg billyvg commented Apr 12, 2025

Inside of the Releases Drawers, we are only viewing a smaller slice of
time than the main PageFilters. The chart widgets and their hooks need
to support a pageFilters override. I think env/projects should be the
same, but I think it will be more consistent to pass around the full
pageFilters object. showReleaseAs is also needed since we currently
show lines inside of the drawer, and bubbles outside of it.

Need as part of #88560

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Apr 12, 2025
Copy link
Member Author

@billyvg billyvg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See how it will be used in the Releases Drawer

);

return (
<InsightsLineChartWidget
id="httpDomainSummaryResponseCodesWidget"
{...props}
id="httpDomainSummaryResponseCodesChartWidget"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gj cursor on autofixing this I guess

@billyvg billyvg marked this pull request as ready for review April 14, 2025 13:36
@billyvg billyvg requested review from a team as code owners April 14, 2025 13:36
@billyvg billyvg requested a review from a team April 14, 2025 13:36
Copy link
Member

@gggritso gggritso left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, but I think that sub prefix is a little strange.

IMO, for hooks like useDiscoverSeries, calling the prop pageFilters is pretty natural, those hooks are generic, and they probably should accept pageFilters as a prop. Same for InsightsTimeSeriesWidget. That props is passed to BaseChart anyway, so it makes sense to override it with something called just pageFilters. I'm less sure about InsightsTimeSeriesWidget, but even there it seems okay to omit the prefix

Comment on lines +8 to +11
// TODO(billy): This should be required when all chart widgets are converted
/**
* Unique ID for the widget
*/
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense, but if that's the case, TimeSeriesWidgetVisualization should use Partial<LoadableChartWidgetProps>. ID shouldn't be required there, just for the Insights chart

billyvg added 3 commits April 14, 2025 13:18
Inside of the Releases Drawers, we are only viewing a smaller slice of
time than the main PageFilters. The chart widgets and their hooks need
to support a pageFilters override. I think env/projects should be the
same, but I think it will be more consistent to pass around the full
pageFilters object. `showReleaseAs` is also needed since we currently
show lines inside of the drawer, and bubbles outside of it.
@billyvg billyvg force-pushed the feat-insights-pass-props-to-insights-chart-widgets branch from b3d7b19 to 770da7b Compare April 14, 2025 18:22
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missed this bc i had inclusion list with only *.tsx :/

Copy link

codecov bot commented Apr 14, 2025

❌ 13 Tests Failed:

Tests completed Failed Passed Skipped
7221 13 7208 4
View the top 3 failed test(s) by shortest run time
SampleTable When all data is available should show span IDs by default
Stack Traces | 0.013s run time
TypeError: Cannot read properties of undefined (reading 'isReady')
    at useDiscoverSeries (.../common/queries/useDiscoverSeries.ts:77:47)
    at useSpanMetricsSeries (.../common/queries/useDiscoverSeries.ts:22:10)
    at useSpanSamples (.../common/queries/useSpanSamples.tsx:58:51)
    at SampleTable (.../sampleList/sampleTable/sampleTable.tsx:89:42)
    at Object.react-stack-bottom-frame (.../react-dom/cjs/react-dom-client.development.js:23863:20)
    at renderWithHooks (.../react-dom/cjs/react-dom-client.development.js:5529:22)
    at updateFunctionComponent (.../react-dom/cjs/react-dom-client.development.js:8897:19)
    at beginWork (.../react-dom/cjs/react-dom-client.development.js:10522:18)
    at runWithFiberInDEV (.../react-dom/cjs/react-dom-client.development.js:1522:13)
    at performUnitOfWork (.../react-dom/cjs/react-dom-client.development.js:15140:22)
    at workLoopSync (.../react-dom/cjs/react-dom-client.development.js:14956:41)
    at renderRootSync (.../react-dom/cjs/react-dom-client.development.js:14936:11)
    at performWorkOnRoot (.../react-dom/cjs/react-dom-client.development.js:14462:44)
    at performWorkOnRootViaSchedulerTask (.../react-dom/cjs/react-dom-client.development.js:16216:7)
    at flushActQueue (.../react/cjs/react.development.js:566:34)
    at Object.<anonymous>.process.env.NODE_ENV.exports.act (.../react/cjs/react.development.js:859:10)
    at .../sentry/sentry/node_modules/@.../react/dist/act-compat.js:47:25
    at renderRoot (.../sentry/sentry/node_modules/@.../react/dist/pure.js:188:26)
    at Object.render (.../sentry/sentry/node_modules/@.../react/dist/pure.js:287:10)
    at render (.../js/sentry-test/reactTestingLibrary.tsx:298:28)
    at Object.<anonymous> (.../sampleList/sampleTable/sampleTable.spec.tsx:63:39)
    at Promise.then.completed (.../sentry/sentry/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/sentry/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at run (.../sentry/sentry/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/sentry/node_modules/jest-runner/build/testWorker.js:106:12)
SampleTable When all data is available should never show no results
Stack Traces | 0.014s run time
TypeError: Cannot read properties of undefined (reading 'isReady')
    at useDiscoverSeries (.../common/queries/useDiscoverSeries.ts:77:47)
    at useSpanMetricsSeries (.../common/queries/useDiscoverSeries.ts:22:10)
    at useSpanSamples (.../common/queries/useSpanSamples.tsx:58:51)
    at SampleTable (.../sampleList/sampleTable/sampleTable.tsx:89:42)
    at Object.react-stack-bottom-frame (.../react-dom/cjs/react-dom-client.development.js:23863:20)
    at renderWithHooks (.../react-dom/cjs/react-dom-client.development.js:5529:22)
    at updateFunctionComponent (.../react-dom/cjs/react-dom-client.development.js:8897:19)
    at beginWork (.../react-dom/cjs/react-dom-client.development.js:10522:18)
    at runWithFiberInDEV (.../react-dom/cjs/react-dom-client.development.js:1522:13)
    at performUnitOfWork (.../react-dom/cjs/react-dom-client.development.js:15140:22)
    at workLoopSync (.../react-dom/cjs/react-dom-client.development.js:14956:41)
    at renderRootSync (.../react-dom/cjs/react-dom-client.development.js:14936:11)
    at performWorkOnRoot (.../react-dom/cjs/react-dom-client.development.js:14462:44)
    at performWorkOnRootViaSchedulerTask (.../react-dom/cjs/react-dom-client.development.js:16216:7)
    at flushActQueue (.../react/cjs/react.development.js:566:34)
    at Object.<anonymous>.process.env.NODE_ENV.exports.act (.../react/cjs/react.development.js:859:10)
    at .../sentry/sentry/node_modules/@.../react/dist/act-compat.js:47:25
    at renderRoot (.../sentry/sentry/node_modules/@.../react/dist/pure.js:188:26)
    at Object.render (.../sentry/sentry/node_modules/@.../react/dist/pure.js:287:10)
    at render (.../js/sentry-test/reactTestingLibrary.tsx:298:28)
    at Object.<anonymous> (.../sampleList/sampleTable/sampleTable.spec.tsx:53:39)
    at Promise.then.completed (.../sentry/sentry/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/sentry/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at run (.../sentry/sentry/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/sentry/node_modules/jest-runner/build/testWorker.js:106:12)
SampleTable When there is missing data should display no query results
Stack Traces | 0.014s run time
TypeError: Cannot read properties of undefined (reading 'isReady')
    at useDiscoverSeries (.../common/queries/useDiscoverSeries.ts:77:47)
    at useSpanMetricsSeries (.../common/queries/useDiscoverSeries.ts:22:10)
    at useSpanSamples (.../common/queries/useSpanSamples.tsx:58:51)
    at SampleTable (.../sampleList/sampleTable/sampleTable.tsx:89:42)
    at Object.react-stack-bottom-frame (.../react-dom/cjs/react-dom-client.development.js:23863:20)
    at renderWithHooks (.../react-dom/cjs/react-dom-client.development.js:5529:22)
    at updateFunctionComponent (.../react-dom/cjs/react-dom-client.development.js:8897:19)
    at beginWork (.../react-dom/cjs/react-dom-client.development.js:10522:18)
    at runWithFiberInDEV (.../react-dom/cjs/react-dom-client.development.js:1522:13)
    at performUnitOfWork (.../react-dom/cjs/react-dom-client.development.js:15140:22)
    at workLoopSync (.../react-dom/cjs/react-dom-client.development.js:14956:41)
    at renderRootSync (.../react-dom/cjs/react-dom-client.development.js:14936:11)
    at performWorkOnRoot (.../react-dom/cjs/react-dom-client.development.js:14462:44)
    at performWorkOnRootViaSchedulerTask (.../react-dom/cjs/react-dom-client.development.js:16216:7)
    at flushActQueue (.../react/cjs/react.development.js:566:34)
    at Object.<anonymous>.process.env.NODE_ENV.exports.act (.../react/cjs/react.development.js:859:10)
    at .../sentry/sentry/node_modules/@.../react/dist/act-compat.js:47:25
    at renderRoot (.../sentry/sentry/node_modules/@.../react/dist/pure.js:188:26)
    at Object.render (.../sentry/sentry/node_modules/@.../react/dist/pure.js:287:10)
    at render (.../js/sentry-test/reactTestingLibrary.tsx:298:28)
    at Object.<anonymous> (.../sampleList/sampleTable/sampleTable.spec.tsx:115:39)
    at Promise.then.completed (.../sentry/sentry/node_modules/jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../sentry/sentry/node_modules/jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:316:40)
    at processTicksAndRejections (node:internal/process/task_queues:105:5)
    at _runTest (.../sentry/sentry/node_modules/jest-circus/build/run.js:252:3)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:126:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at _runTestsForDescribeBlock (.../sentry/sentry/node_modules/jest-circus/build/run.js:121:9)
    at run (.../sentry/sentry/node_modules/jest-circus/build/run.js:71:3)
    at runAndTransformResultsToJestFormat (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at jestAdapter (.../sentry/sentry/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at runTestInternal (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:367:16)
    at runTest (.../sentry/sentry/node_modules/jest-runner/build/runTest.js:444:34)
    at Object.worker (.../sentry/sentry/node_modules/jest-runner/build/testWorker.js:106:12)

To view more test analytics, go to the Test Analytics Dashboard
📋 Got 3 mins? Take this short survey to help us improve Test Analytics.

@billyvg billyvg merged commit 074cd4c into master Apr 15, 2025
41 checks passed
@billyvg billyvg deleted the feat-insights-pass-props-to-insights-chart-widgets branch April 15, 2025 13:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants