fix: scatter plot tooltip issue and remove cloudinary rounded image solution #1266

OgDev-01 · 2023-06-14T06:02:30Z

What type of PR is this? (check all applicable)

Description

This PR:

Updates the rendered svg node on the scatterplot
removes all instances of Cloudinary rounded image helper usage
partially fixes scatterplot tooltip hover issue we had open in Support a popover like behavior for tooltips plouc/nivo#2201

Actual problem

Not being able to render and style images to be rounded (we got around this using the Cloudinary rounded mage transformation utils function)
We could not hover on the tooltip provided by nivo on the scatterplot of which we opened an issue for here

Solution

I was working on a personal project and ran into svgs... and research lead me to find out about foreignObject in svgs. With the foreignObject element, I could render none Scalable Vector Graphic elements as svg. And that was the actual solution to all the above-mentioned issues we had.

Related Tickets & Documents

Fixes #780

Mobile & Desktop Screenshots/Recordings

Before

Screen.Recording.2023-06-14.at.06.58.38.mov

After

Screen.Recording.2023-06-14.at.06.56.57.mov

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2023-06-14T06:02:34Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`2406f93`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/6491972b987e0900084683bc
😎 Deploy Preview	https://deploy-preview-1266--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2023-06-14T06:02:35Z

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	`2406f93`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/6491972b754b4300088fecd0
😎 Deploy Preview	https://deploy-preview-1266--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

components/atoms/Avatar/avatar-hover-card.tsx

bdougie · 2023-06-14T08:15:00Z

This functionally works, great job!

Can you provide more context to your approach for this fix?

Is the lib/utils/roundedImages still needed at this point and should that be deleted?
Can you explain the SVG approach to this fix a bit more? I am not quite following the context from just looking at the code.
~~Are we still leveraging cloudinary for caching? I don't remember how much of that was baked into the rounded images.~~

update:

I already see we are caching separately

https://github.com/open-sauced/insights/blob/beta/lib/utils/cachedImages.ts

OgDev-01 · 2023-06-16T08:34:13Z

This functionally works, great job!

Can you provide more context to your approach for this fix?

Is the lib/utils/roundedImages still needed at this point and should that be deleted?

Can you explain the SVG approach to this fix a bit more? I am not quite following the context from just looking at the code.

~~Are we still leveraging cloudinary for caching? I don't remember how much of that was baked into the rounded images.~~

update:

I already see we are caching separately

https://github.com/open-sauced/insights/blob/beta/lib/utils/cachedImages.ts

Updates: I have added the pr Description with the actual problem and solution approach
cc: @bdougie

brandonroberts · 2023-06-20T11:50:07Z

@OgDev-01 are you going to delete the lib/utils/roundedImages.ts file also if its not being used?

OgDev-01 · 2023-06-20T12:06:15Z

@OgDev-01 are you going to delete the lib/utils/roundedImages.ts file also if its not being used?

Ooh, i missed that...deleting shortly :<

## [1.52.0-beta.7](v1.52.0-beta.6...v1.52.0-beta.7) (2023-06-20) ### 🐛 Bug Fixes * link single highlight dialog contributor info div to contributor profile ([#1279](#1279)) ([67d5a16](67d5a16)) * remove failing maintenance actions ([#1271](#1271)) ([bc516c3](bc516c3)) * scatter plot tooltip issue and remove cloudinary rounded image solution ([#1266](#1266)) ([ec6b3d5](ec6b3d5))

github-actions · 2023-06-20T13:28:01Z

🎉 This PR is included in version 1.52.0-beta.7 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.53.0-beta.1](v1.52.0...v1.53.0-beta.1) (2023-06-20) ### 🍕 Features * handle close highlight dialog ([#1268](#1268)) ([b6a78c7](b6a78c7)) ### 🐛 Bug Fixes * link single highlight dialog contributor info div to contributor profile ([#1279](#1279)) ([67d5a16](67d5a16)) * remove failing maintenance actions ([#1271](#1271)) ([bc516c3](bc516c3)) * scatter plot tooltip issue and remove cloudinary rounded image solution ([#1266](#1266)) ([ec6b3d5](ec6b3d5))

github-actions · 2023-06-20T13:34:42Z

🎉 This PR is included in version 1.53.0-beta.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.53.0](v1.52.0...v1.53.0) (2023-06-22) ### 🍕 Features * handle close highlight dialog ([#1268](#1268)) ([b6a78c7](b6a78c7)) ### 🐛 Bug Fixes * language update - change developer to contributor ([#1274](#1274)) ([7e86ac9](7e86ac9)), closes [#1247](#1247) * link single highlight dialog contributor info div to contributor profile ([#1279](#1279)) ([67d5a16](67d5a16)) * properly format local time displayed on user's profile ([#1282](#1282)) ([604cc62](604cc62)) * remove failing maintenance actions ([#1271](#1271)) ([bc516c3](bc516c3)) * scatter plot tooltip issue and remove cloudinary rounded image solution ([#1266](#1266)) ([ec6b3d5](ec6b3d5))

github-actions · 2023-06-22T17:09:24Z

🎉 This PR is included in version 1.53.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.52.0-beta.7](open-sauced/app@v1.52.0-beta.6...v1.52.0-beta.7) (2023-06-20) ### 🐛 Bug Fixes * link single highlight dialog contributor info div to contributor profile ([#1279](open-sauced/app#1279)) ([67d5a16](open-sauced/app@67d5a16)) * remove failing maintenance actions ([#1271](open-sauced/app#1271)) ([bc516c3](open-sauced/app@bc516c3)) * scatter plot tooltip issue and remove cloudinary rounded image solution ([#1266](open-sauced/app#1266)) ([ec6b3d5](open-sauced/app@ec6b3d5))

## [1.53.0-beta.1](open-sauced/app@v1.52.0...v1.53.0-beta.1) (2023-06-20) ### 🍕 Features * handle close highlight dialog ([#1268](open-sauced/app#1268)) ([b6a78c7](open-sauced/app@b6a78c7)) ### 🐛 Bug Fixes * link single highlight dialog contributor info div to contributor profile ([#1279](open-sauced/app#1279)) ([67d5a16](open-sauced/app@67d5a16)) * remove failing maintenance actions ([#1271](open-sauced/app#1271)) ([bc516c3](open-sauced/app@bc516c3)) * scatter plot tooltip issue and remove cloudinary rounded image solution ([#1266](open-sauced/app#1266)) ([ec6b3d5](open-sauced/app@ec6b3d5))

## [1.53.0](open-sauced/app@v1.52.0...v1.53.0) (2023-06-22) ### 🍕 Features * handle close highlight dialog ([#1268](open-sauced/app#1268)) ([b6a78c7](open-sauced/app@b6a78c7)) ### 🐛 Bug Fixes * language update - change developer to contributor ([#1274](open-sauced/app#1274)) ([7e86ac9](open-sauced/app@7e86ac9)), closes [#1247](open-sauced/app#1247) * link single highlight dialog contributor info div to contributor profile ([#1279](open-sauced/app#1279)) ([67d5a16](open-sauced/app@67d5a16)) * properly format local time displayed on user's profile ([#1282](open-sauced/app#1282)) ([604cc62](open-sauced/app@604cc62)) * remove failing maintenance actions ([#1271](open-sauced/app#1271)) ([bc516c3](open-sauced/app@bc516c3)) * scatter plot tooltip issue and remove cloudinary rounded image solution ([#1266](open-sauced/app#1266)) ([ec6b3d5](open-sauced/app@ec6b3d5))

refactor: fix scatter plot tooltip issue

3ce3f56

OgDev-01 changed the title ~~refactor: fix scatter plot tooltip issue and remove cloudinary rounded image solution~~ fix: scatter plot tooltip issue and remove cloudinary rounded image solution Jun 14, 2023

OgDev-01 requested review from brandonroberts and bdougie June 14, 2023 06:18

OgDev-01 added the needs review PRs that need review from core engineering team label Jun 14, 2023

refactor: remove redundant code

517b87c

bdougie reviewed Jun 14, 2023

View reviewed changes

components/atoms/Avatar/avatar-hover-card.tsx Show resolved Hide resolved

Merge branch 'beta' into testing-svg-customization

decc400

brandonroberts approved these changes Jun 20, 2023

View reviewed changes

remove rounded image lib helper

2406f93

OgDev-01 added ready-to-merge and removed needs review PRs that need review from core engineering team labels Jun 20, 2023

brandonroberts merged commit ec6b3d5 into beta Jun 20, 2023

brandonroberts deleted the testing-svg-customization branch June 20, 2023 13:15

github-actions bot added the released on @beta label Jun 20, 2023

github-actions bot added the released label Jun 22, 2023

bdougie mentioned this pull request Sep 9, 2023

Support a popover like behavior for tooltips plouc/nivo#2201

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: scatter plot tooltip issue and remove cloudinary rounded image solution #1266

fix: scatter plot tooltip issue and remove cloudinary rounded image solution #1266

OgDev-01 commented Jun 14, 2023 •

edited

Loading

netlify bot commented Jun 14, 2023 •

edited

Loading

netlify bot commented Jun 14, 2023 •

edited

Loading

bdougie commented Jun 14, 2023 •

edited

Loading

OgDev-01 commented Jun 16, 2023

brandonroberts commented Jun 20, 2023

OgDev-01 commented Jun 20, 2023

github-actions bot commented Jun 20, 2023

github-actions bot commented Jun 20, 2023

github-actions bot commented Jun 22, 2023

fix: scatter plot tooltip issue and remove cloudinary rounded image solution #1266

fix: scatter plot tooltip issue and remove cloudinary rounded image solution #1266

Conversation

OgDev-01 commented Jun 14, 2023 • edited Loading

What type of PR is this? (check all applicable)

Description

Actual problem

Solution

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Before

After

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Jun 14, 2023 • edited Loading

✅ Deploy Preview for design-insights ready!

netlify bot commented Jun 14, 2023 • edited Loading

✅ Deploy Preview for oss-insights ready!

bdougie commented Jun 14, 2023 • edited Loading

OgDev-01 commented Jun 16, 2023

brandonroberts commented Jun 20, 2023

OgDev-01 commented Jun 20, 2023

github-actions bot commented Jun 20, 2023

github-actions bot commented Jun 20, 2023

github-actions bot commented Jun 22, 2023

OgDev-01 commented Jun 14, 2023 •

edited

Loading

netlify bot commented Jun 14, 2023 •

edited

Loading

netlify bot commented Jun 14, 2023 •

edited

Loading

bdougie commented Jun 14, 2023 •

edited

Loading