adjust resize and collapse function of preview

[six7]

Closes #111
Closes #112

CleanShot.2023-10-06.at.21.52.07.mp4

[changeset-bot]

🦋 Changeset detected

Latest commit: f1b82af

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@tokens-studio/graph-editor	Patch
@tokens-studio/graph-engine-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

PR Analysis

• 🎯 Main theme: Adjusting the resize and collapse function of the preview feature in the graph editor.
• 📝 PR summary: This PR introduces changes to the preview feature in the graph editor. It adjusts the resize and collapse functions of the preview, and also modifies the UI components related to this feature.
• 📌 Type of PR: Enhancement
• 🧪 Relevant tests added: No
• ⏱️ Estimated effort to review [1-5]: 3, because the PR involves changes to the UI components and the functionality of the preview feature, which requires understanding of the existing codebase and the impact of the changes.
• 🔒 Security concerns: No security concerns found

PR Feedback

• 💡 General suggestions: The changes introduced in this PR seem to improve the user experience of the preview feature. However, it would be beneficial to ensure that these changes do not introduce any unexpected behavior or bugs. It would also be helpful to add tests to verify the new behavior.

• 🤖 Code feedback:

  • relevant file: packages/ui/src/components/Preview.tsx
    suggestion: Consider extracting the inline styles into a separate CSS file or a styled component for better maintainability and reusability. [medium]
    relevant line: <Box css={{ direction: 'ltr', overflowY: 'auto', flexGrow: 1, paddingTop: '0' }}>

  • relevant file: packages/graph-editor/src/editor/index.tsx
    suggestion: It would be good to add a comment explaining the reason for disabling the zoom on double click. This would help other developers understand the decision. [medium]
    relevant line: zoomOnDoubleClick={false}

  • relevant file: packages/ui/src/components/Preview.tsx
    suggestion: It seems like the 'isVisible' state is being used in multiple places. Consider creating a custom hook to manage this state and its logic to improve code readability and maintainability. [medium]
    relevant line: const [isVisible, setIsVisible] = useState(false);

  • relevant file: packages/ui/src/components/Preview.tsx
    suggestion: The 'handleSetVisibleTab' function seems to be doing two things: setting the visible tab and toggling the visibility. Consider splitting this into two separate functions for better readability and single responsibility principle. [important]
    relevant line: const handleSetVisibleTab = useCallback((tab) => {

How to use

To invoke the PR-Agent, add a comment using one of the following commands:
/review [-i]: Request a review of your Pull Request. For an incremental review, which only considers changes since the last review, include the '-i' option.
/describe: Modify the PR title and description based on the contents of the PR.
/improve [--extended]: Suggest improvements to the code in the PR. Extended mode employs several calls, and provides a more thorough feedback.
/ask <QUESTION>: Pose a question about the PR.
/update_changelog: Update the changelog based on the PR's contents.

To edit any configuration parameter from configuration.toml, add --config_path=new_value
For example: /review --pr_reviewer.extra_instructions="focus on the file: ..."
To list the possible configuration parameters, use the /config command.