Skip to content

feat: implement responsive canvas schemas card component#7805

Open
Joiejoie1 wants to merge 2 commits into
layer5io:masterfrom
Joiejoie1:feat/animated-card-6521
Open

feat: implement responsive canvas schemas card component#7805
Joiejoie1 wants to merge 2 commits into
layer5io:masterfrom
Joiejoie1:feat/animated-card-6521

Conversation

@Joiejoie1

Copy link
Copy Markdown
Contributor

Description

This PR fixes #6521 by implementing a responsive, animated MesherySchemasCard component and integrating it directly into the Kanvas/Features section layout (DesignerFeatures_diagram.js).

Key additions and refactors include:

  • Interactive HTML5 Canvas: Added an optimized, animated wave and stream generation algorithm inside the card header to visually represent dynamic data schemas.
  • Micro-interactions: Embedded smooth, fluid float and pulse animations (@keyframes) for UI tables, data streams, and hubs using inline CSS layers that are light on performance.
  • Resource Bottleneck Fix: Refactored the diagram asset import strategy in DesignerFeatures_diagram.js from SVGR named imports (ReactComponent) to standard source strings (<img> tags) to resolve Webpack runtime compilation failures and silent pipeline terminations.
  • Fully Responsive Structure: Implemented a glassmorphism shell design (m-glass) with strict max-width constraints to ensure seamless container scaling from mobile up to desktop configurations.

This PR fixes #

Notes for Reviewers

  • The new component resides at src/components/MesherySchemasCard.js for clean reusability.
  • Changed SVG parsing to standard image sources in the diagram wrapper to alleviate memory and loader issues during localized dev bundling phases.
  • Verified that the canvas loop cleans up safely via its React useEffect unmount return block (cancelAnimationFrame and event listener removal) to completely avoid memory leaks.

Signed commits

  • Yes, I signed my commits.

@github-actions

github-actions Bot commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Preview deployment for PR #7805 removed.

This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

@Bhumikagarggg Bhumikagarggg added the issue/dco Commit sign-off instructions label Jun 17, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. A what? A commit sign-off (your email address).

To amend the commits in this PR with your signoff using the instructions provided in the DCO check.

To configure your dev environment to automatically signoff on your commits in the future, see these instructions.


        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

@Bhumikagarggg Bhumikagarggg left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@Joiejoie1 Could you please share the page where these changes were made? I'd like to review them in context.

@Bhumikagarggg

Copy link
Copy Markdown
Contributor

@Joiejoie1 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

@Joiejoie1

Copy link
Copy Markdown
Contributor Author

@Joiejoie1 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

Sre I will @Bhumikagarggg . Thanks

@@ -0,0 +1,65 @@
import React from "react";

export const MesherySchemasCard = ({

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

The onActionClick prop is passed to MesherySchemasCard, but it is not used inside the component. As a result, clicking the Manage button does not trigger any action. Could you please check and wire the prop to the button if it is intended to be functional?

Also, the PR is currently missing the required DCO sign-off.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Hi @Sbragul26, thank you for the catch and the review!

onActionClick Prop: That was an oversight on my part. I will wire the onActionClick prop directly to the onClick handler of the "Manage" button right away so that it triggers the intended action successfully.

DCO Sign-off: Ah, it looks like my previous amend didn't fully propagate or a new commit pushed without the flag. I will re-verify my GPG/SSH environment settings in the workspace, sign the commit properly using git commit --amend -S --no-edit, and force-push it to clear the DCO check.

I'll push the updates shortly!

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Hi @Sbragul26 ,
I have updated the component to wire the onActionClick prop directly to the "Manage" button. I also amended the commit with the proper -s flag to append the required DCO sign-off. Everything should be clean and ready for another look. Thanks for the review!

Signed-off-by: GitHub <noreply@github.com>
@Joiejoie1 Joiejoie1 force-pushed the feat/animated-card-6521 branch from 596b781 to ce45aea Compare June 23, 2026 12:28
@Bhumikagarggg

Copy link
Copy Markdown
Contributor

@Joiejoie1 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

issue/dco Commit sign-off instructions project/kanvas

Projects

None yet

Development

Successfully merging this pull request may close these issues.

add animated card

3 participants