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(widget-builder): Make visualize fields draggable for ordering #84814

Merged
merged 7 commits into from
Feb 10, 2025

Conversation

nikkikapadia
Copy link
Member

One of the features we had left to implement was drag and drop ordering of the visualize fields. On any non-bignumber widget will have the draggable feature where there are 2 or more fields.

Here's what it looks like:

Screen.Recording.2025-02-07.at.4.35.09.PM.mov

Fair warning it looks like a lot of code changes but it's mostly whitespace changes. I've created a general sortable component and a "ghost" component to show when dragging.

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

@narsaynorath narsaynorath left a comment

Choose a reason for hiding this comment

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

wow so good

Copy link

codecov bot commented Feb 10, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

✅ All tests successful. No failed tests found.

Additional details and impacted files
@@            Coverage Diff             @@
##           master   #84814      +/-   ##
==========================================
- Coverage   87.88%   87.59%   -0.29%     
==========================================
  Files        9564     9661      +97     
  Lines      541667   546198    +4531     
  Branches    20862    21494     +632     
==========================================
+ Hits       476021   478424    +2403     
- Misses      65306    67437    +2131     
+ Partials      340      337       -3     

Copy link

codecov bot commented Feb 10, 2025

Bundle Report

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

Detailed changes
Bundle name Size Change
app-webpack-bundle-array-push 32.75MB 25.12kB (0.08%) ⬆️

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-3a78c6.*.js 600 bytes 1.39MB 0.04%
chunks/app_components_assigneeBadge_tsx-app_components_badge_featureBadge_tsx-app_components_charts_-dd838b.*.js 75 bytes 1.11MB 0.01%
chunks/app_views_issueDetails_groupEventDetails_groupEventDetails_tsx-app_views_issueDetails_streaml-b468ad.*.js 86 bytes 387.85kB 0.02%
chunks/app_components_breadcrumbs_tsx-app_utils_performance_quickTrace_quickTraceQuery_tsx-app_utils-51877b.*.js 146 bytes 342.25kB 0.04%
chunks/app_actionCreators_preferences_tsx-app_components_avatar_actorAvatar_tsx-app_components_chevr-a0a6fe.*.js 69 bytes 296.23kB 0.02%
chunks/app_views_dashboards_dashboard_tsx-app_views_dashboards_layoutUtils_tsx-app_views_dashboards_-d32b4d.*.js 5.37kB 272.41kB 2.01%
chunks/app_actionCreators_members_tsx-app_components_acl_access_tsx-app_components_avatar_avatarList-d6cdfc.*.js 92 bytes 189.51kB 0.05%
chunks/app_views_insights_database_utils_getIntervalForMetricFunction_tsx-app_views_traces_content_tsx.*.js 305 bytes 100.86kB 0.3%
chunks/app_views_performance_traceDetails_index_tsx-node_modules_echarts_lib_chart_scatter_js-node_m-00cbd0.*.js -253 bytes 99.05kB -0.25%
entrypoints/app.js 339 bytes 98.32kB 0.35%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.2c9966b02561fb1f57c3.js (New) 94.33kB 94.33kB 100.0% 🚀
chunks/app_views_alerts_rules_metric_triggers_chart_index_tsx-app_views_alerts_rules_utils_tsx.*.js 21 bytes 71.18kB 0.03%
chunks/app_components_breadcrumbs_tsx-app_components_feedback_widget_us*kWidget_tsx-app_utils-de67b0.255372aab20adf72ce65.js (New) 52.57kB 52.57kB 100.0% 🚀
chunks/app_components_charts_components_dataZoomInside_tsx-app_components_charts_components_toolBox_-4b5dae.*.js 2.74kB 45.35kB 6.42% ⚠️
chunks/app_views_dashboards_contexts_widgetSyncContext_tsx-app_views_insights_browser_webVitals_view-596e75.*.js -1.52kB 44.74kB -3.28%
chunks/app_components_charts_components_dataZoomInside_tsx-app_components_charts_components_toolBox_-5531f4.*.js -1.52kB 44.41kB -3.3%
chunks/app_views_insights_browser_webVitals_components_charts_performanceScoreChart_tsx.*.js 6 bytes 43.34kB 0.01%
chunks/app_components_charts_components_dataZoomInside_tsx-app_components_charts_components_toolBox_-b3f1e2.*.js -1.52kB 41.84kB -3.5%
chunks/app_components_charts_components_dataZoomInside_tsx-app_components_charts_components_toolBox_-51a8df.*.js -1.59kB 41.01kB -3.74%
chunks/app_views_insights_mobile_screens_views_screensLandingPage_tsx-app_views_insights_pages_domai-598e4f.*.js 1.62kB 39.03kB 4.33%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.c7b2784cd4b4e29f03d7.js (New) 37.17kB 37.17kB 100.0% 🚀
chunks/app_components_feedback_widget_feedbackWidgetButton_tsx-app_views_insights_http_views_httpDom-ce2a33.*.js 1.52kB 37.13kB 4.26%
chunks/app_components_feedback_widget_feedbackWidgetButton_tsx-app_views_explore_charts_index_tsx-ap-35d762.*.js 20 bytes 34.44kB 0.06%
chunks/app_components_feedback_widget_feedbackWidgetButton_tsx-app_views_insights_common_components_-2f190a.*.js 103 bytes 34.21kB 0.3%
chunks/app_views_insights_queues_views_destinationSummaryPage_tsx.*.js 1.52kB 33.93kB 4.68%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.a004a249923ab3915f8c.js (New) 32.03kB 32.03kB 100.0% 🚀
chunks/app_views_insights_common_components_modulePageFilterBar_tsx-app_views_insights_common_compon-5dd5b5.*.js (New) 31.77kB 31.77kB 100.0% 🚀
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.bcb98a5b07a92f2c58c3.js (New) 31.14kB 31.14kB 100.0% 🚀
chunks/app_components_charts_components_dataZoomInside_tsx-app_components_charts_components_toolBox_-4f9b0b.*.js (New) 26.21kB 26.21kB 100.0% 🚀
chunks/app_views_explore_multiQueryMode_index_tsx.*.js 5.07kB 25.36kB 24.95% ⚠️
chunks/app_components_charts_components_dataZoomInside_tsx-app_components_charts_components_toolBox_-52426c.*.js (New) 24.95kB 24.95kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.0706a9c500a7c7509703.js (New) 24.18kB 24.18kB 100.0% 🚀
chunks/app_views_explore_logs_index_tsx-node_modules_echarts_lib_chart_scatter_js-node_modules_echar-5988f7.*.js 19 bytes 22.15kB 0.09%
chunks/app_components_checkInTimeline_checkInTimeline_tsx-app_components_checkInTimeline_gridLines_t-a9dd19.*.js 19 bytes 20.83kB 0.09%
chunks/app_components_feedback_widget_feedbackWidgetButton_tsx-app_views_dashboards_contexts_widgetS-993211.*.js (New) 20.77kB 20.77kB 100.0% 🚀
chunks/app_views_insights_common_components_insightsLineChartWidget_tsx-app_views_insights_common_co-2fd359.*.js (New) 20.25kB 20.25kB 100.0% 🚀
chunks/app_views_insights_common_components_headerContainer_tsx-app_views_insights_common_components-693866.*.js 103 bytes 19.75kB 0.52%
chunks/app_components_alertLink_tsx-app_views_insights_crons_views_overview_tsx.*.js 103 bytes 18.71kB 0.55%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.91846682b727cb426169.js (New) 17.01kB 17.01kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.60cea896d851820fadd9.js (New) 16.21kB 16.21kB 100.0% 🚀
chunks/app_views_issueDetails_groupUptimeChecks_tsx-node_modules_react-aria_utils_dist_mergeRefs_mjs.*.js 57 bytes 14.76kB 0.39%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-d987b9.*.js -103 bytes 14.57kB -0.7%
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.7437998f663f10c8ba11.js (New) 13.36kB 13.36kB 100.0% 🚀
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.5e718407e82093ca5e0a.js (New) 12.21kB 12.21kB 100.0% 🚀
chunks/app_components_gridEditable_sortLink_tsx-app_views_insights_mobile_screenload_components_scre-1ff55c.*.js (New) 11.54kB 11.54kB 100.0% 🚀
chunks/app_components_events_interfaces_llm-monitoring_llmMonitoringSection_tsx-app_views_insights_c-ad85ed.*.js (New) 11.36kB 11.36kB 100.0% 🚀
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-228151.*.js -103 bytes 11.01kB -0.93%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-97ba570.*.js -103 bytes 9.73kB -1.05%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-97ba572.*.js -103 bytes 9.73kB -1.05%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-97ba573.*.js -103 bytes 9.73kB -1.05%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-97ba571.*.js -103 bytes 9.73kB -1.05%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-97ba574.*.js -103 bytes 9.73kB -1.05%
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-266d60.*.js (New) 9.29kB 9.29kB 100.0% 🚀
chunks/app_views_insights_common_components_modulePageProviders_tsx-app_views_insights_pages_domainV-906f95.*.js (New) 8.68kB 8.68kB 100.0% 🚀
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f0.*.js 104 bytes 8.53kB 1.23%
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f3.*.js 104 bytes 8.53kB 1.23%
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f2.*.js 104 bytes 8.53kB 1.23%
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f1.*.js 104 bytes 8.53kB 1.23%
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f5.*.js (New) 8.53kB 8.53kB 100.0% 🚀
chunks/vendors-node_modules_echarts_lib_component_dataZoomInside_js-node_modules_lodash_partialRight-e5351f4.*.js 104 bytes 8.53kB 1.23%
chunks/app_views_insights_common_components_insightsLineChartWidget_tsx-app_views_insights_common_co-9de3f2.*.js (New) 5.32kB 5.32kB 100.0% 🚀
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_projectDetail_index_tsx.637058d1b3c317c34f59.js (Deleted) -94.33kB 0 bytes -100.0% 🗑️
chunks/app_components_breadcrumbs_tsx-app_components_feedback_widget_us*kWidget_tsx-app_utils-de67b0.439eca9273e40eb3678d.js (Deleted) -52.57kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_performance_transactionSummary-51d702.20ea0177a32431ca3ce0.js (Deleted) -37.17kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_insights_common_components_cha-d2aaf9.46834bf0708b135b3a52.js (Deleted) -32.03kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_eventsRequest_tsx-app_components_feedback_widget_us*kWidget_tsx--fbb1b9.eb05984c4b80c95d5a68.js (Deleted) -31.14kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_modulePageFilterBar_tsx-app_views_insights_common_compon-b132e2.*.js (Deleted) -30.15kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_uptime_views_overview_tsx.*.js (Deleted) -28.49kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_components_dataZoomInside_tsx-app_components_charts_components_toolBox_-c5084c.*.js (Deleted) -27.73kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-feae7d.825a1c77e29f5b237bf1.js (Deleted) -24.18kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_common_components_insightsLineChartWidget_tsx-app_views_insights_common_co-8fdd1d.*.js (Deleted) -21.8kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_views_dashboards_contexts_widgetSync-1f553e.b6dcb27477c5a80adacd.js (Deleted) -20.65kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_utils_discover_discoverQuery_tsx-app-c5fefe.93bcd5ad562a1ed2551d.js (Deleted) -17.01kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_gridEditable_sortLink_tsx-d372f4.eef0224efc22e5960762.js (Deleted) -16.21kB 0 bytes -100.0% 🗑️
chunks/app_components_feedback_widget_us*kWidget_tsx-app_components_performance_transactionSe-f61270.a8f962b309d9692c605a.js (Deleted) -13.36kB 0 bytes -100.0% 🗑️
chunks/app_components_gridEditable_sortLink_tsx-app_views_insights_common_components_moduleUpsellHoo-6bbbdb.*.js (Deleted) -13.05kB 0 bytes -100.0% 🗑️
chunks/app_components_charts_lineChart_tsx-app_components_feedback_widget_us*kWidget_tsx-app_-26fc43.5e78134be12459b42588.js (Deleted) -12.21kB 0 bytes -100.0% 🗑️
chunks/app_components_events_interfaces_llm-monitoring_llmMonitoringSection_tsx-app_views_insights_c-a549c5.*.js (Deleted) -8.73kB 0 bytes -100.0% 🗑️
chunks/vendors-node_modules_echarts_lib_chart_scatter_js-node_modules_echarts_lib_component_dataZoom-cc6b05.*.js (Deleted) -8.43kB 0 bytes -100.0% 🗑️
chunks/app_views_insights_llmMonitoring_components_charts_llmMonitoringCharts_tsx.*.js (Deleted) -7.9kB 0 bytes -100.0% 🗑️

@nikkikapadia nikkikapadia merged commit 3737e96 into master Feb 10, 2025
43 checks passed
@nikkikapadia nikkikapadia deleted the nikki/feat/draggable-reorder-visualize-field branch February 10, 2025 19: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