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.

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

ref(explore): Use standard widget components #83845

Open
wants to merge 12 commits into
base: master
Choose a base branch
from

Conversation

gggritso
Copy link
Member

@gggritso gggritso commented Jan 22, 2025

Replace current usage of Chart from Insights with the standard visualization components from Dashboards.

Closes https://github.com/getsentry/team-visibility/issues/20

Changes

Not too major!

  1. Everywhere the utils passed around Series objects, now they pass around TimeseriesData objects. They're very similar, but they include meta, which standard charts use to figure out the correct units
  2. No more scaling the units. This is automatically done in the visualization components as of feat(dashboards): TimeSeriesWidget unit conversions #84264

e.g.,
Screenshot 2025-01-22 at 1 42 40 PM

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jan 22, 2025
Copy link

codecov bot commented Jan 22, 2025

Bundle Report

Changes will increase total bundle size by 38.89kB (0.12%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
app-webpack-bundle-array-push 33.2MB 38.89kB (0.12%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: app-webpack-bundle-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
chunks/app_actionCreators_discoverHomepageQueries_tsx-app_bootstrap_initializeApp_tsx-app_components-2ddc8c.*.js -12.75kB 1.36MB -0.93%
chunks/app_components_assigneeBadge_tsx-app_components_badge_featureBadge_tsx-app_components_charts_-92064d.*.js (New) 1.15MB 1.15MB 100.0% 🚀
chunks/app_actionCreators_onboardingTasks_tsx-app_actionCreators_redirectToProject_tsx-app_actionCre-dc8452.*.js (New) 450.01kB 450.01kB 100.0% 🚀
chunks/app_actionCreators_guides_tsx-app_actionCreators_preferences_tsx-app_components_avatar_actorA-95b65d.*.js 5.0kB 296.19kB 1.72%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-96191f.a2b8f6c0275046e93eab.js (New) 281.85kB 281.85kB 100.0% 🚀
chunks/app_actionCreators_discoverHomepageQueries_tsx-app_components_acl_access_tsx-app_components_a-c8cdb0.*.js -15.27kB 167.23kB -8.37%
chunks/app_views_dashboards_widgets_timeSeriesWidget_formatTooltipValue_tsx-app_views_dashboards_wid-642bcf.*.js (New) 122.95kB 122.95kB 100.0% 🚀
chunks/app_components_charts_useChartZoom_tsx-app_utils_routeAnalytics_useRouteAnalyticsEventNames_t-09385a.*.js (New) 112.93kB 112.93kB 100.0% 🚀
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_useChartZoom_tsx-app_view-c60bc3.*.js (New) 104.49kB 104.49kB 100.0% 🚀
entrypoints/app.js 4 bytes 98.52kB 0.0%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.19e48fd6c4bc2abbba22.js (New) 94.64kB 94.64kB 100.0% 🚀
chunks/app_components_charts_eventsRequest_tsx-app_components_metrics_queryFieldGroup_tsx-app_views_-0eb303.*.js (New) 71.95kB 71.95kB 100.0% 🚀
chunks/app_components_charts_eventsRequest_tsx-app_components_charts_useChartZoom_tsx-app_utils_disc-ba9d97.*.js (New) 61.07kB 61.07kB 100.0% 🚀
chunks/app_components_charts_useChartZoom_tsx-app_components_gridEditable_sortLink_tsx-app_types_ale-3164a1.*.js (New) 49.1kB 49.1kB 100.0% 🚀
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_useChartZoom_tsx-app_util-462a2f.*.js (New) 48.47kB 48.47kB 100.0% 🚀
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_useChartZoom_tsx-app_util-66cf56.*.js (New) 43.94kB 43.94kB 100.0% 🚀
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_useChartZoom_tsx-app_util-30f0fa.*.js (New) 43.49kB 43.49kB 100.0% 🚀
chunks/app_components_breadcrumbs_tsx-app_components_charts_useChartZoom_tsx-app_utils_isActiveSuper-af1e4d.*.js (New) 41.27kB 41.27kB 100.0% 🚀
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_modals_widgetViewerModal_tsx-app-a870a6.*.js (New) 38.83kB 38.83kB 100.0% 🚀
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--64a49b.e0ba80b700238ead1947.js (New) 37.82kB 37.82kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.63f317ed26b0c193928d.js (New) 37.27kB 37.27kB 100.0% 🚀
chunks/app_views_dashboards_widgets_widgetLayout_widgetLayout_stories_tsx.*.js 3.05kB 35.28kB 9.45% ⚠️
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-8653f4.*.js 104 bytes 34.95kB 0.3%
chunks/app_views_insights_common_components_chart_tsx.*.js -1.74kB 33.84kB -4.88%
chunks/app_components_charts_useChartZoom_tsx-app_components_feedback_widget_us*kWidget_tsx-a-4a87f3.13520a5db8ad7d0f5148.js (New) 33.43kB 33.43kB 100.0% 🚀
chunks/app_views_dashboards_contexts_widgetSyncContext_stories_tsx.*.js 3.38kB 32.66kB 11.54% ⚠️
chunks/app_components_feedback_widget_feedbackWidgetButton_tsx-app_views_explore_charts_index_tsx-ap-123287.*.js 6.28kB 30.46kB 25.97% ⚠️
chunks/app_components_stories_jsxNode_tsx-app_components_stories_jsxProperty_tsx-app_components_stor-253fb5.*.js 3.38kB 25.49kB 15.28% ⚠️
chunks/app_components_charts_useChartZoom_tsx-app_views_explore_logs_index_tsx-node_modules_echarts_-316dc8.*.js (New) 25.27kB 25.27kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.997e0b94051a296ed726.js (New) 24.18kB 24.18kB 100.0% 🚀
chunks/app_views_insights_common_components_insightsLineChartWidget_tsx-app_views_insights_common_qu-a73dd3.*.js 3.23kB 23.4kB 16.04% ⚠️
chunks/app_components_charts_components_markLine_tsx-app_components_charts_useChartZoom_tsx-app_comp-368912.*.js (New) 22.57kB 22.57kB 100.0% 🚀
chunks/app_components_charts_useChartZoom_tsx-app_views_explore_multiQueryMode_index_tsx.*.js (New) 20.89kB 20.89kB 100.0% 🚀
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_modals_widgetBuilder_addToDashbo-41f166.*.js (New) 20.24kB 20.24kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.7095177d9b22bbdb57cb.js (New) 17.11kB 17.11kB 100.0% 🚀
chunks/app_views_insights_common_components_sampleDrawerHeaderTransaction_tsx-app_views_insights_com-01d269.*.js (New) 16.79kB 16.79kB 100.0% 🚀
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_modals_importDashboardFromFileMo-b87dab.*.js (New) 16.61kB 16.61kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.8bfe81854a1ad530c4a8.js (New) 16.21kB 16.21kB 100.0% 🚀
chunks/app_views_insights_common_components_moduleLayout_tsx-app_views_insights_common_components_mo-d7059d.*.js (New) 14.89kB 14.89kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.35d25d55a9004d269100.js (New) 13.36kB 13.36kB 100.0% 🚀
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.8d1ad7786c00f64089dd.js (New) 12.25kB 12.25kB 100.0% 🚀
chunks/app_views_dashboards_widgets_common_widgetFrame_tsx.*.js 460 bytes 12.18kB 3.93%
chunks/app_actionCreators_prompts_tsx-app_components_feedback_widget_us*k_tsx-app_components_-5240c4.50277c0f021c0fbe840b.js (New) 12.12kB 12.12kB 100.0% 🚀
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-0b3efe0.*.js 104 bytes 9.61kB 1.09%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-0b3efe1.*.js 104 bytes 9.61kB 1.09%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-0b3efe2.*.js 104 bytes 9.61kB 1.09%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-0b3efe3.*.js (New) 9.61kB 9.61kB 100.0% 🚀
chunks/app_components_assigneeBadge_tsx-app_components_badge_featureBadge_tsx-app_components_charts_-eed9e1.*.js (Deleted) -1.13MB 0 bytes -100.0% 🗑️
chunks/app_actionCreators_onboardingTasks_tsx-app_actionCreators_redirectToProject_tsx-app_actionCre-23ad5f.*.js (Deleted) -455.0kB 0 bytes -100.0% 🗑️
chunks/app_views_dashboards_dashboard_tsx-app_views_metrics_constants_tsx-data_image_svg_xml_base64_-91a9a4.*.js (Deleted) -280.3kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_utils_routeAnalytics_useRouteAnalyticsEventNames_tsx--1a1463.*.js (Deleted) -111.21kB 0 bytes -100.0% 🗑️
chunks/app_views_explore_charts_confidenceFooter_tsx-app_views_insights_database_utils_getIntervalFo-e39af7.*.js (Deleted) -109.97kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.6ded76d8c5dd177dd82c.js (Deleted) -94.64kB 0 bytes -100.0% 🗑️
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_views_alerts_utils_index_tsx-app_views_dash-d130fb.*.js (Deleted) -94.38kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_eventsRequest_tsx-app_components_metrics_queryFieldGroup_tsx-app_compon-ae927e.*.js (Deleted) -71.95kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_eventsRequest_tsx-app_components_charts_lineChart_tsx-app_utils_discove-a3f1dd.*.js (Deleted) -59.34kB 0 bytes -100.0% 🗑️
chunks/app_components_breadcrumbs_tsx-app_components_feedback_widget_us*kWidget_tsx-app_utils-df50cf.94ccc249e78ae62d93ff.js (Deleted) -57.17kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_components_gridEditable_sortLink_tsx-app_types_alerts-3e099f.*.js (Deleted) -47.35kB 0 bytes -100.0% 🗑️
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_eventsRequest_tsx-app_com-23fd62.*.js (Deleted) -44.75kB 0 bytes -100.0% 🗑️
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_utils_metrics_useMetricsMeta_tsx-app_views_-c35bd4.*.js (Deleted) -38.42kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--64a49b.bcb96f8b96f19c526cca.js (Deleted) -37.82kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.a262a8e7b81e7f2c7511.js (Deleted) -37.27kB 0 bytes -100.0% 🗑️
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_utils_metrics_useMetricsMeta_tsx-app_views_-92388d.*.js (Deleted) -33.92kB 0 bytes -100.0% 🗑️
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_utils_metrics_useMetricsMeta_tsx-app_views_-4b2f40.*.js (Deleted) -33.47kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.cafd85d4045509327899.js (Deleted) -31.93kB 0 bytes -100.0% 🗑️
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_eventsRequest_tsx-app_com-c4fa77.*.js (Deleted) -26.06kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.97d825f18924579c4ce1.js (Deleted) -24.18kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_views_explore_logs_index_tsx-node_modules_echarts_lib-3ef21c.*.js (Deleted) -23.56kB 0 bytes -100.0% 🗑️
chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_eventsRequest_tsx-app_com-47e4ff.*.js (Deleted) -22.41kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_components_markLine_tsx-app_components_charts_lineChart_tsx-app_compone-58bfaa.*.js (Deleted) -20.85kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_views_explore_multiQueryMode_index_tsx.*.js (Deleted) -19.16kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.13a97900e8a9bbd8882f.js (Deleted) -17.11kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_sampleDrawerHeaderTransaction_tsx-app_views_insights_com-028622.*.js (Deleted) -16.31kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.075c07c29416943ff21f.js (Deleted) -16.21kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_moduleLayout_tsx-app_views_insights_common_components_mo-c611ba.*.js (Deleted) -14.46kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.c417d1eb030acc40320d.js (Deleted) -13.36kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.b8c6394185b9cb27d30b.js (Deleted) -12.25kB 0 bytes -100.0% 🗑️
chunks/app_actionCreators_prompts_tsx-app_components_feedback_widget_us*k_tsx-app_components_-5240c4.00e384e5ad1f6af15f27.js (Deleted) -12.12kB 0 bytes -100.0% 🗑️
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-2524d7.*.js (Deleted) -10.46kB 0 bytes -100.0% 🗑️

Files in chunks/app_views_dashboards_widgets_timeSeriesWidget_formatTooltipValue_tsx-app_views_dashboards_wid-642bcf.*.js:

  • ./app/views/explore/utils.tsx → Total Size: 3.29kB

Files in chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_useChartZoom_tsx-app_view-c60bc3.*.js:

  • ./app/views/explore/utils.tsx → Total Size: 3.29kB

Files in chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_useChartZoom_tsx-app_util-462a2f.*.js:

  • ./app/views/explore/utils.tsx → Total Size: 3.29kB

Files in chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_useChartZoom_tsx-app_util-66cf56.*.js:

  • ./app/views/explore/utils.tsx → Total Size: 3.29kB

Files in chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_charts_useChartZoom_tsx-app_util-30f0fa.*.js:

  • ./app/views/explore/utils.tsx → Total Size: 3.29kB

Files in chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_modals_widgetViewerModal_tsx-app-a870a6.*.js:

  • ./app/views/explore/utils.tsx → Total Size: 3.29kB

Files in chunks/app_components_feedback_widget_feedbackWidgetButton_tsx-app_views_explore_charts_index_tsx-ap-123287.*.js:

  • ./app/views/explore/settings.tsx → Total Size: 165 bytes

  • ./app/views/insights/common/queries/useSortedTimeSeries.tsx → Total Size: 5.59kB

Files in chunks/app_components_charts_useChartZoom_tsx-app_views_explore_logs_index_tsx-node_modules_echarts_-316dc8.*.js:

  • ./app/views/explore/utils.tsx → Total Size: 3.29kB

Files in chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_modals_widgetBuilder_addToDashbo-41f166.*.js:

  • ./app/views/explore/utils.tsx → Total Size: 3.29kB

Files in chunks/app_components_alerts_onDemandMetricAlert_tsx-app_components_modals_importDashboardFromFileMo-b87dab.*.js:

  • ./app/views/explore/utils.tsx → Total Size: 3.29kB

@gggritso gggritso force-pushed the ref/explore/use-standard-widgets branch from 3695d66 to d437ca8 Compare January 30, 2025 15:21

This comment was marked as outdated.

@gggritso gggritso marked this pull request as ready for review January 31, 2025 20:39
@gggritso gggritso requested review from a team as code owners January 31, 2025 20:39
@gggritso gggritso requested a review from Zylphrex January 31, 2025 20:40
Copy link
Contributor

@DominikB2014 DominikB2014 left a comment

Choose a reason for hiding this comment

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

👍

@@ -58,7 +59,9 @@ export function getExploreUrl({
);
}

export function combineConfidenceForSeries(series: Series[]): Confidence {
export function combineConfidenceForSeries(
series: Array<Pick<TimeseriesData, 'confidence'>>
Copy link
Contributor

Choose a reason for hiding this comment

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

Would it better to just do TimeseriesData[] here as the function implies that an entire series is the parameter?

Or is the Pick here for backwards compatibility with Series? If that's case we could also consider TimseriesData[] | Series[]

Copy link
Member Author

@gggritso gggritso Feb 6, 2025

Choose a reason for hiding this comment

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

Yep exactly, for backward compatibility. I could do the union too

Copy link
Contributor

Choose a reason for hiding this comment

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

Union makes more sense to me, because with the Pick, I believe passing in any array of objects, where the object has confidence as a property, would work.

Copy link
Contributor

Choose a reason for hiding this comment

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

And if we removed Series eventually, it's easier to find this.

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