fix: make the OrgChart story better work by tbouffard · Pull Request #532 · maxGraph/maxGraph · GitHub

DISCLAIMER: this is a work in progress, force push can occur at any time

Migrate to TypeScript to ease the maintenance

Notes

Inspired by #88
See f7743a6

mxGraph resources

live example: https://jgraph.github.io/mxgraph/javascript/examples/orgchart.html
Source of the example: https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/examples/orgchart.html

Tasks

extract the fix of "missing printUtils export" in a dedicated PR --> fix: add missing printUtils export #538
extract the fix of "Graph.insertVertex undefined position/size" in a dedicated PR --> fix: allow to insert vertex without setting position and size #555
implement a fix for PopupMenuHandler.factoryMethod has a wrong type? #308 --> docs: explain how to visualize the documentation for a specific version #504
Editing: make double click trigger editing, see also [BUG]Editing story: can't edit value. #544
Editing: fix Graph.isCellEditable to not require to set CellStateStyle.editable to true (default is supposed to be true) --> fix: correctly use the default value of CellStateStyle.editable #570
extract "export the treeTraversal function" (ref was missing in the root index.ts file)
rework the layout: put the toolbar in a fixed container
make the story better work (in place edition of the label)
create videos of the mxGraph example and of this PR for comparison

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

Migrate it to TypeScript to ease the maintenance

# Conflicts: # packages/html/stories/OrgChart.stories.ts

NOTE TO KEEP toolbar not displayed not possible to select/edit the text of the cells

… method instead of calling Graph [skip ci]

[skip ci]

--> check if the JSDoc must be updated if we previously mentioned the properties were mandatory yes VertexParameters mention mandatory parameters Should be set except if a LayoutManager or Layout is set on the Graph # Conflicts: # packages/core/src/view/mixins/VertexMixin.ts

Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

tbouffard added the bug Something isn't working label Sep 12, 2024

tbouffard mentioned this pull request Sep 20, 2024

[BUG] PageBreak Story: "Print" does not work. #535

Closed

tbouffard changed the title fix: make the OrgChart story work fix: make the OrgChart story better work Sep 23, 2024

tbouffard force-pushed the fix/story_orgchart branch from 6129070 to 2233b83 Compare October 13, 2024 16:40

tbouffard force-pushed the fix/story_orgchart branch from 2233b83 to a92d99c Compare October 27, 2024 15:55

tbouffard mentioned this pull request Nov 2, 2024

fix: allow to insert vertex without setting position and size #555

Merged

tbouffard force-pushed the fix/story_orgchart branch from a92d99c to 4832232 Compare November 3, 2024 11:05

This was referenced Nov 11, 2024

[BUG]Editing story: can't edit value. #544

Closed

fix: correctly use the default value of CellStateStyle.editable #570

Merged

tbouffard added 19 commits January 2, 2025 18:11

START fix: make the OrgChart story work

3429c43

Migrate it to TypeScript to ease the maintenance

add todo

2875355

WIP migrate to TS

3c7fb04

# Conflicts: # packages/html/stories/OrgChart.stories.ts

fix ts errors

7b44d94

fix ts errors

15568a1

order imports

4d6370e

fix TS errors

06ba119

manage TS errors

f065544

display the outline

e8663c6

NOTE TO KEEP toolbar not displayed not possible to select/edit the text of the cells

WIP display the toolbar

10c0b56

wip: make the delete work with a workaround using the layout.traverse…

6edc73b

… method instead of calling Graph [skip ci]

improve the configuration of the style of outlineContainer

b67c205

[skip ci]

improve the configuration of the style of "container"

74ce21f

[skip ci]

Graph: add comment about a potential change

f352a57

WIP toolbar displayed with flex containers

7cdf6d6

VertexMixin.ts: remove already managed TODO in the main branch

50a74ed

EXTRA: export treeTraversal.ts in lib

2121595

story: use the newly treeTraversal exported function

4d83594

tbouffard force-pushed the fix/story_orgchart branch from db42375 to 4d83594 Compare January 2, 2025 17:19

tbouffard added 2 commits January 2, 2025 18:23

restore usage of function for style.edgeStyle

2fc48f6

fix type for the factoryMethod

4aed3af

tbouffard mentioned this pull request Apr 1, 2026

Migrate all JavaScript stories to TypeScript #1035

Open

28 tasks

fix: make the OrgChart story better work by tbouffard · Pull Request #532 · maxGraph/maxGraph · GitHub

Uh oh!

fix: make the OrgChart story better work - #532

fix: make the OrgChart story better work#532
tbouffard wants to merge 21 commits into
mainfrom
fix/story_orgchart

tbouffard commented Sep 12, 2024 •
edited
Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Nov 23, 2024 •
edited
Loading

Uh oh!

Uh oh!

sonarqubecloud Bot commented Jan 27, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

fix: make the OrgChart story better work by tbouffard · Pull Request #532 · maxGraph/maxGraph · GitHub

Uh oh!

fix: make the OrgChart story better work - #532

fix: make the OrgChart story better work#532tbouffard wants to merge 21 commits intomainmaxGraph/maxGraph:mainfrom fix/story_orgchartmaxGraph/maxGraph:fix/story_orgchartCopy head branch name to clipboard

Conversation

tbouffard commented Sep 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Notes

Tasks

Uh oh!

coderabbitai Bot commented Nov 23, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

sonarqubecloud Bot commented Jan 27, 2025

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

fix: make the OrgChart story better work#532
tbouffard wants to merge 21 commits into
mainfrom
fix/story_orgchart

tbouffard commented Sep 12, 2024 •
edited
Loading

coderabbitai Bot commented Nov 23, 2024 •
edited
Loading