Skip to content

Conversation

@Ponch49
Copy link
Contributor

@Ponch49 Ponch49 commented Jan 6, 2024

Overview

Issue Type

  • Bug
  • Feature
  • Tech Debt

Description
Implemented D3 Visualization Library to represent React Component Hierarchy. Relationships are also represented with Edges connecting the Nodes.

Ticket Item
RL-24

Steps to Reproduce Bug / Validate Feature / Confirm Tech Debt Fix

  1. npm install
  2. npm run webpack
  3. Click F5 to run VsCode Extension Simulator
  4. Click on React Labyrinth Extension Icon
  5. Select View Tree in Sidebar Menu and select the root file for the current app directory

Previous behavior
Would render the Nodes and Edges, but not in a clear hierarchy.

Expected behavior
The hierarchy of the React application are now in a Tree structure

Screenshots & Videos
Screenshot 2024-01-06 at 4 48 08 PM

Screen.Recording.2024-01-06.at.4.46.37.PM.mov

…king on adding edges and getting the positioning of the nodes to represent a tree shape.
… edges to connect upon rendering to finish the tree.
Merge branch 'dev' into FL-JA/D3-visualization
Copy link
Contributor

@ash-t-luu ash-t-luu left a comment

Choose a reason for hiding this comment

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

very nice job!

Copy link
Contributor

@Louka3 Louka3 left a comment

Choose a reason for hiding this comment

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

Looks good to me

@Louka3 Louka3 merged commit 164d30c into dev Jan 6, 2024
@Ponch49 Ponch49 deleted the FL-JA/D3-visualization branch February 15, 2024 03:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants