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(chart-controls): Show detailed data type tooltip when hovering type icon #23970

Merged
merged 10 commits into from
May 11, 2023

Conversation

ved-kashyap-samsung
Copy link
Contributor

@ved-kashyap-samsung ved-kashyap-samsung commented May 8, 2023

SUMMARY

Fix for issue - #13248
Minor improvement: It show the type as in VARCHAR(50), text, double precision when hovering the icon in the metadata panel Please refer the after screenshots below for more understanding.

AFTER SCREENSHOTS

tooltip datatype in chart 1
tooltip datatype in chart 2

TESTING INSTRUCTIONS

Please verify changes from my fork

  1. Click on charts from headers section to see all charts
  2. Click and open any chart
  3. On the left side there will be columns of table and column options
  4. If we hover on the icon (abc, # etc.) of column type, it should open a tooltip with detailed data type of that particular column

ADDITIONAL INFORMATION

  • Has associated issue: Fixes [explore] Show detailed data type tooltip when hovering type icon #13248
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

Copy link
Contributor

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

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

Congrats on making your first PR and thank you for contributing to Superset! 🎉 ❤️

We hope to see you in our Slack community too! Not signed up? Use our Slack App to self-register.

@ved-kashyap-samsung
Copy link
Contributor Author

@mistercrunch @junlincc Can you please review and approve. Thanks!

Copy link
Member

@rusackas rusackas left a comment

Choose a reason for hiding this comment

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

Code LGTM, though tests would be greatly appreciated. Approving to unblock, but pinging others @kgabryje and @michael-s-molina for an additional review in case we're preferring other techniques/components, and @kasiazjc in case there's anything that needs to be adjusted from the UI/design stance.

@pull-request-size pull-request-size bot added size/M and removed size/S labels May 8, 2023
@ved-kashyap-samsung
Copy link
Contributor Author

Thanks @rusackas ! I will add some tests soon. Also, I have applied prettier linting issue fixes.

@ved-kashyap-samsung
Copy link
Contributor Author

ved-kashyap-samsung commented May 8, 2023

@rusackas I have added test cases for my changes and all are passing. Attaching pic for reference.

tests

@ved-kashyap-samsung ved-kashyap-samsung changed the title feat(chart-controls): Show detailed data type tooltip when hovering type icon [WIP] feat(chart-controls): Show detailed data type tooltip when hovering type icon May 9, 2023
@ved-kashyap-samsung ved-kashyap-samsung changed the title [WIP] feat(chart-controls): Show detailed data type tooltip when hovering type icon feat(chart-controls): Show detailed data type tooltip when hovering type icon May 9, 2023
@ved-kashyap-samsung
Copy link
Contributor Author

ved-kashyap-samsung commented May 9, 2023

@rusackas I have run npm run lint and npm run test and there were no issues found. Can you please re-run the checks.
cc: @michael-s-molina , @kgabryje , @kasiazjc

@ved-kashyap-samsung
Copy link
Contributor Author

@rusackas All checks have passed now. I have verified all UI behaviors in dev from my end. Please let me know in case anything else is required. Thank you for prompt response!

@kasiazjc
Copy link
Contributor

@rusackas I have run npm run lint and npm run test and there were no issues found. Can you please re-run the checks. cc: @michael-s-molina , @kgabryje , @kasiazjc

Thank you @ved-kashyap-samsung for working on this! I have one suggestion (if possible) can you centre the caret/arrow from the tooltip so that it points to the centre to the icon? With current implementation the caret seems not to be anchored to anything specific and it can be confusing, I think

@rusackas rusackas requested a review from kgabryje May 10, 2023 13:51
@ved-kashyap-samsung
Copy link
Contributor Author

@rusackas I have run npm run lint and npm run test and there were no issues found. Can you please re-run the checks. cc: @michael-s-molina , @kgabryje , @kasiazjc

Thank you @ved-kashyap-samsung for working on this! I have one suggestion (if possible) can you centre the caret/arrow from the tooltip so that it points to the centre to the icon? With current implementation the caret seems not to be anchored to anything specific and it can be confusing, I think

@kasiazjc , @rusackas Now, I have made changes to align the tooltip arrow to the center of the icon in this PR. Please check some sample pics from the modified version. Thanks!

tooltip datatype in chart 4 croppedtooltip datatype in chart 3 cropped

@codecov
Copy link

codecov bot commented May 10, 2023

Codecov Report

Merging #23970 (64db462) into master (b613167) will increase coverage by 0.41%.
The diff coverage is 67.78%.

❗ Current head 64db462 differs from pull request most recent head c5a6c8c. Consider uploading reports for the commit c5a6c8c to get more accurate results

@@            Coverage Diff             @@
##           master   #23970      +/-   ##
==========================================
+ Coverage   67.71%   68.13%   +0.41%     
==========================================
  Files        1918     1941      +23     
  Lines       74157    75310    +1153     
  Branches     8053     8167     +114     
==========================================
+ Hits        50219    51314    +1095     
- Misses      21885    21907      +22     
- Partials     2053     2089      +36     
Flag Coverage Δ
hive ?
javascript 54.55% <67.78%> (+0.65%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
...ackages/superset-ui-chart-controls/src/fixtures.ts 100.00% <ø> (ø)
...chart-controls/src/shared-controls/dndControls.tsx 58.33% <ø> (ø)
...d/packages/superset-ui-chart-controls/src/types.ts 100.00% <ø> (ø)
...s/superset-ui-core/src/components/SafeMarkdown.tsx 85.71% <0.00%> (+19.04%) ⬆️
...ackages/superset-ui-core/src/utils/featureFlags.ts 100.00% <ø> (ø)
...s/legacy-plugin-chart-calendar/src/controlPanel.ts 50.00% <ø> (ø)
...nd/plugins/legacy-preset-chart-nvd3/src/NVD3Vis.js 0.00% <ø> (ø)
...rts/src/BigNumber/BigNumberTotal/transformProps.ts 0.00% <0.00%> (ø)
...lugin-chart-echarts/src/BigNumber/BigNumberViz.tsx 0.00% <0.00%> (ø)
...plugin-chart-echarts/src/BoxPlot/transformProps.ts 55.00% <ø> (ø)
... and 65 more

... and 156 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@rusackas
Copy link
Member

Really appreciate this fantastic PR, particularly the quick turnaround on suggestions (both code and design), and clear communication. You even added tests, and managed to make CI happy! This is a very well-done first PR, and I hope we see more like it in the future :) I added a couple more (non-blocking) suggestions, but I'm happy to approve it as-is, and look forward to merging this!

Improved conditional statement
@ved-kashyap-samsung
Copy link
Contributor Author

Really appreciate this fantastic PR, particularly the quick turnaround on suggestions (both code and design), and clear communication. You even added tests, and managed to make CI happy! This is a very well-done first PR, and I hope we see more like it in the future :) I added a couple more (non-blocking) suggestions, but I'm happy to approve it as-is, and look forward to merging this!

Thanks @rusackas ! Sure, I am looking forward to contribute more and more to superset community in future. Also, thank you for suggesting the changes, I have included your review comments in my latest commit.

@rusackas rusackas merged commit 4497601 into apache:master May 11, 2023
@mistercrunch mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 3.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/M 🚢 3.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants