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

feat(multi-query): Add charts and tables to multi query mode #85303

Merged
merged 9 commits into from
Feb 18, 2025

Conversation

shruthilayaj
Copy link
Member

@shruthilayaj shruthilayaj commented Feb 14, 2025

State is currently persisted in the URL, but this is just for the first pass.
We'll need to store backend state eventually.

Needs follow up for:

  • pagination on table
  • probably other stuff i'm not able to think of...

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Feb 14, 2025
@shruthilayaj shruthilayaj marked this pull request as ready for review February 14, 2025 23:59
@shruthilayaj shruthilayaj requested a review from a team as a code owner February 14, 2025 23:59
Copy link

codecov bot commented Feb 15, 2025

Bundle Report

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

Detailed changes
Bundle name Size Change
app-webpack-bundle-array-push 33.08MB 20.63kB (0.06%) ⬆️

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_bootstrap_initializeApp_tsx-app_components_avatar_actorAvatar_tsx-app_components_avatar_a-7c38cc.*.js 385 bytes 1.4MB 0.03%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-5dfcad.6722b7a3543097fca614.js (New) 281.42kB 281.42kB 100.0% 🚀
chunks/app_views_traces_content_tsx-node_modules_core-js_modules_es_array_to-spliced_js.*.js (New) 128.65kB 128.65kB 100.0% 🚀
entrypoints/app.js 156 bytes 99.02kB 0.16%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.b167b9eae3bb18f13964.js (New) 95.24kB 95.24kB 100.0% 🚀
chunks/app_views_explore_components_typeBadge_tsx-app_views_explore_multiQueryMode_index_tsx.*.js (New) 42.95kB 42.95kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.02f72685b7266d484c4c.js (New) 37.35kB 37.35kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.afbe287ca31b428af673.js (New) 31.68kB 31.68kB 100.0% 🚀
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.03024cc9dc0771586889.js (New) 31.18kB 31.18kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.dbbf70e121a5eaf3d64e.js (New) 24.18kB 24.18kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.1dc0a9ef984cb218bcc0.js (New) 17.29kB 17.29kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.a8242202de3ec1ef231e.js (New) 16.21kB 16.21kB 100.0% 🚀
chunks/app_views_explore_hooks_useSortByFields_tsx-app_views_explore_hooks_useTopEvents_tsx-app_view-c29ecd.*.js (New) 14.46kB 14.46kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.a03e970e13ec71e3e1af.js (New) 13.36kB 13.36kB 100.0% 🚀
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.2201b435c756cb7769bb.js (New) 12.32kB 12.32kB 100.0% 🚀
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-1148da.*.js (New) 10.42kB 10.42kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-5dfcad.677cb54c232c34fc8c43.js (Deleted) -281.42kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_database_utils_getIntervalForMetricFunction_tsx-app_views_traces_content_tsx.*.js (Deleted) -140.54kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.ede52efa55f499bc48e2.js (Deleted) -95.24kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.68a12e953acefbe91a88.js (Deleted) -37.35kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.122c57d5f0ed5454677f.js (Deleted) -31.68kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.ef75c97584262fe1112c.js (Deleted) -31.18kB 0 bytes -100.0% 🗑️
chunks/app_views_explore_multiQueryMode_index_tsx.*.js (Deleted) -26.39kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.88e1f35fb232b4321d1e.js (Deleted) -24.18kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.cd362beb03edd043ce9b.js (Deleted) -17.29kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.415cdbd37b558090c016.js (Deleted) -16.21kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.cf50753e549ca5d29fd3.js (Deleted) -13.36kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.e1cae80d6ee9d758cbb9.js (Deleted) -12.32kB 0 bytes -100.0% 🗑️
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-266d60.*.js (Deleted) -9.47kB 0 bytes -100.0% 🗑️

Files in chunks/app_views_explore_hooks_useSortByFields_tsx-app_views_explore_hooks_useTopEvents_tsx-app_view-c29ecd.*.js:

  • ./app/views/explore/tables/fieldRenderer.tsx → Total Size: 40.12kB

  • ./app/views/explore/multiQueryMode/locationUtils.tsx → Total Size: 7.01kB

Copy link
Contributor

@edwardgou-sentry edwardgou-sentry left a comment

Choose a reason for hiding this comment

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

lgtm, just had a few questions

@@ -130,8 +131,9 @@ function getUpdatedLocationWithQueries(
location: Location,
queries: WritableExploreQueryParts[] | null | undefined
) {
let targetQueries: string[] | null = null;
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: I think you can simplify this even further using a ternary operator now that the else if condition is removed. Something like const targetQueries = defined(queries) ? queries.map(query => ...) : null;

Comment on lines +220 to +223
for (const groupBy of queryToUpdate.groupBys) {
const value = row[groupBy];
search.setFilterValues(groupBy, [value]);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

minor nit, feels slightly more readable to me:

Suggested change
for (const groupBy of queryToUpdate.groupBys) {
const value = row[groupBy];
search.setFilterValues(groupBy, [value]);
}
queryToUpdate.groupBys.forEach(groupBy => {
search.setFilterValues(groupBy, [row[groupBy]]);
});

index,
}: MultiQueryFieldProps) {
const queries = useReadQueriesFromLocation();
const userQuery = queries[index]!.query;
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 be safer to do something like this instead queries[index]?.query ?? ''? If there's a possibility that queries[index] is undefined somehow

Comment on lines 31 to 45
const allFields: string[] = [];

for (const groupBy of groupBys) {
if (allFields.includes(groupBy)) {
continue;
}
allFields.push(groupBy);
}

for (const yAxis of yAxes) {
if (allFields.includes(yAxis)) {
continue;
}
allFields.push(yAxis);
}
Copy link
Contributor

@edwardgou-sentry edwardgou-sentry Feb 18, 2025

Choose a reason for hiding this comment

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

If im understanding this correctly, I think you could use a Set here? So you don't have to check for existence and just drop everything into an allFields Set blindly. Unless the order matters, but there might be a datastructure for that

@shruthilayaj shruthilayaj enabled auto-merge (squash) February 18, 2025 16:57
@shruthilayaj shruthilayaj merged commit c198ba2 into master Feb 18, 2025
42 checks passed
@shruthilayaj shruthilayaj deleted the shruth/feat/multi-query-charts-tables branch February 18, 2025 17:09
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