Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug/4645 graph node containing keyword #4657

Conversation

ibrahimWassouf
Copy link
Contributor

@ibrahimWassouf ibrahimWassouf commented Jul 22, 2023

📑 Summary

Fix issues relating to keywords being parsed in node idStrings, vertex text, and edge text

Resolves #4645

📏 Design Decisions

Previously, tokens were modularized to many parts. E.g., there was no Alphanumeric token, instead, there was an alphabet token ALPHA, a numbers token NUM, and an underscore token UNDERSCORE. The parser originally used recursion and concatenation on token types for things such as idString. However, this made it very difficult to debug issues such as the call and click keywords eliciting their respective states inside vertex and edge texts. Also, it was impossible to allow keywords in idStrings, because the parser would have to parse a keyword and then concatenate it to other tokens, resulting in eliciting errors for parsing a keyword in the wrong places.

To combat this, I added separate states for vertex and edge text. Now, we can add anything between the vertices and links without adding additional token types to the grammar (doing this is what resulted in super long definitions such as alphaNumToken). We can also have quotes inside vertices and edges without escaping them.

One problem I could not solve was allowing node idStrings to start with keywords. Previously, if the keyword occurred anywhere in the idString it would elicit an error. Now, it only elicits an error if it appears at the start of idString. E.g., graph-node and graph.node would elicit an error. However, it's important to note that an error will not be elicited if the keyword is followed by an underscore. I.e., graph_node is valid. I'm not sure why this happens, as the regex is valid. I spent a couple days on this problem alone and could not make it work.

📋 Tasks

Make sure you

What this allows is for idStrings that are separated by
dashes or underscores to be considered one whole string
rather than a bunch of tokens mixed together.

This is necessary for examples such as a-node-graph[text].
Now, the last part of the idString 'graph' will be read as
part of the NODE_STRING token rather than attempting to add
a GRAPH token to the idString.
This was never really used and had many things wrong with it.
I believe that if a hex was provided in the diagram specification,
the alphanum grammar would break it up into a BRKT and NUM token
and use the first line with the addVertex() function.

Second, the styleLink grammar provides the exact same functionality
with the linkStyle keyword.

Third, updateLink() expects an array of nums, not a hex digit.

Fourth, no documentation is provided on this grammar statement existing.
Fifth, the unit test does not work in version 10.2.4
@codecov
Copy link

codecov bot commented Jul 22, 2023

Codecov Report

Merging #4657 (34bf618) into develop (f8ebfee) will increase coverage by 31.68%.
The diff coverage is n/a.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff              @@
##           develop    #4657       +/-   ##
============================================
+ Coverage    45.32%   77.00%   +31.68%     
============================================
  Files           52      144       +92     
  Lines         6645    14583     +7938     
  Branches        18      563      +545     
============================================
+ Hits          3012    11230     +8218     
+ Misses        3633     3243      -390     
- Partials         0      110      +110     
Flag Coverage Δ
e2e 83.89% <ø> (?)
unit 45.32% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

see 138 files with indirect coverage changes

@ibrahimWassouf
Copy link
Contributor Author

@nirname, let me know what you think when you get the chance

Similar to what was done in the class diagram parser,
this will allow string tokens to appear in any state.
This is especially helpful, because it will simplify the
code and any future refactoring
@nirname nirname self-requested a review July 22, 2023 17:56
@nirname
Copy link
Contributor

nirname commented Jul 22, 2023

Kinda immediate answer without looking into the code: graph-node and graph.node will cause a error because recognizing graph takes precedence over that token you want to get during tokenizing.

@ibrahimWassouf
Copy link
Contributor Author

Kinda immediate answer without looking into the code: graph-node and graph.node will cause a error because recognizing graph takes precedence over that token you want to get during tokenizing.

Shouldn't this logic also apply to when there is an underscore? I've tested it and it works

@ibrahimWassouf
Copy link
Contributor Author

@nirname @sidharthv96, I thought of an additional edge case and was writing a unit test for it. Imagine we had a node with text such as A[This is a "()" in text]. Would we want the quotations marks to appear? In my current implementation, the quotes will appear but the parser will throw an error for including a node shape token instead of text. This is because quotation marks do not start the string state when inside a vertex or edge text.

I can do that of course, so in the end A[This is a "()" as text] will appear as a node containing This is a () as text. However, then users will not be able to easily including quotation marks. I believe they would have to resort to making the whole thing a string and using #quot; like they do now.

@sidharthv96
Copy link
Member

Imagine we had a node with text such as A[This is a "()" in text]. Would we want the quotations marks to appear?

No. Quotes, if present, should wrap the entire string.

The following seems to be a good path for us to follow. What do you think?

Input Expected Output Current Behavior
A[This is a () in text] Error Same
A[This is a "()" in text] Error Same
A[This is a \"()\" in text] Error Same
A["This is a "()" in text"] Error Same
A["This is a () in text"] This is a () in text Same
A["This is a \"()\" in text"] This is a "()" in text This is a () in text

Originally, I thought this was necessary to prevent parsing
the token as part of an edge. I forgot that the token will always
be separated from the link/edge by the node id. Added an unit test
for an edge case to be certain.
@ibrahimWassouf ibrahimWassouf force-pushed the bug/4645_graph_node_containing_keyword branch from a52ac8e to 834c67e Compare August 1, 2023 01:47
@sidharthv96
Copy link
Member

Shouldn't this logic also apply to when there is an underscore? I've tested it and it works

node current expected
graph_node working working
graph-node error ?
graph.node error ?
graph/node error ?
class_node working working
class-node error ?
class.node error ?
class/node error ?

This is not trivial task. Perhaps we can postpone this, or may be even reject. Because it looks really strange. In case we allow dots and other special characters in a node name we can assume that someone would want to use graph_node along with graph.node. This is not critical, so may be we could keep graph_node because it works now, and prohibit other strange node names.

Supporting underscore is similar to variable names in most programming languages. We should keep things as-is here, and prohibit strange node names.

ibrahimWassouf and others added 4 commits August 1, 2023 07:54
This attempts to maintain the current behaviour.
Previously, because HREF contained a space and called
a state, the href token was able to be placed in the
beginning of node ids (because it wouldn't conflict
without the space). We require the space to keep that
behaviour.
ibrahimWassouf and others added 8 commits August 3, 2023 18:59
This will ensure that alphaNumToken does not lose any of
the previously used tokens in its definition. The same
tokens were added to textNoTagsToken explicitly, because it used to
have alphaNumToken in its definition before I removed it.

Previously, textNoTagsToken and alphaNumToken had many tokens in
common in their definition. To avoid grammar conflicts, the
alphaNumStatement grammar was created. However, I found this
unintuitive and was an extra step just to avoid repetition in
the definitions.

I opted to have repetition in the definitions of textNoTagsToken
and alphaNumToken and it be explicitly clear right away, rather than
have extra grammar statements like alphaNumStatement which don't look
like they do anything at first glance
Copy link
Contributor

@nirname nirname left a comment

Choose a reason for hiding this comment

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

Insightful job! Nicely done

@nirname nirname added this pull request to the merge queue Aug 5, 2023
Merged via the queue into mermaid-js:develop with commit e1379ee Aug 5, 2023
fuxingloh referenced this pull request in fuxingloh/contented Aug 15, 2023
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [mermaid](https://togithub.com/mermaid-js/mermaid) | [`10.3.0` ->
`10.3.1`](https://renovatebot.com/diffs/npm/mermaid/10.3.0/10.3.1) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/mermaid/10.3.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/mermaid/10.3.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/mermaid/10.3.0/10.3.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/mermaid/10.3.0/10.3.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>mermaid-js/mermaid (mermaid)</summary>

###
[`v10.3.1`](https://togithub.com/mermaid-js/mermaid/releases/tag/v10.3.1)

[Compare
Source](https://togithub.com/mermaid-js/mermaid/compare/v10.3.0...v10.3.1)

#### What's Changed

#### Bugfixes

- fix style in contributors section of intro by
[@&#8203;keer4n](https://togithub.com/keer4n) in
[https://github.com/mermaid-js/mermaid/pull/4670](https://togithub.com/mermaid-js/mermaid/pull/4670)
- fix:
[#&#8203;4676](https://togithub.com/mermaid-js/mermaid/issues/4676)
redirect fix by [@&#8203;sidharthv96](https://togithub.com/sidharthv96)
in
[https://github.com/mermaid-js/mermaid/pull/4693](https://togithub.com/mermaid-js/mermaid/pull/4693)
- [#&#8203;2139](https://togithub.com/mermaid-js/mermaid/issues/2139)
Applying user defined classes properly when calculating shape width by
[@&#8203;knsv](https://togithub.com/knsv) in
[https://github.com/mermaid-js/mermaid/pull/4722](https://togithub.com/mermaid-js/mermaid/pull/4722)
- Bug/4645 graph node containing keyword by
[@&#8203;ibrahimWassouf](https://togithub.com/ibrahimWassouf) in
[https://github.com/mermaid-js/mermaid/pull/4657](https://togithub.com/mermaid-js/mermaid/pull/4657)
- fix: Remove triple parsing of diagrams by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[https://github.com/mermaid-js/mermaid/pull/4697](https://togithub.com/mermaid-js/mermaid/pull/4697)
- resolve info `HTML` and `Document` assignment by
[@&#8203;Yokozuna59](https://togithub.com/Yokozuna59) in
[https://github.com/mermaid-js/mermaid/pull/4514](https://togithub.com/mermaid-js/mermaid/pull/4514)
- fix!(deps): fix zenuml style leakage. by
[@&#8203;danshuitaihejie](https://togithub.com/danshuitaihejie) in
[https://github.com/mermaid-js/mermaid/pull/4705](https://togithub.com/mermaid-js/mermaid/pull/4705)
- Use our prettier config on the `packages/mermaid/src/config.type.ts`
file by [@&#8203;aloisklink](https://togithub.com/aloisklink) in
[https://github.com/mermaid-js/mermaid/pull/4715](https://togithub.com/mermaid-js/mermaid/pull/4715)
- create `ParserDefinition` type by
[@&#8203;Yokozuna59](https://togithub.com/Yokozuna59) in
[https://github.com/mermaid-js/mermaid/pull/4719](https://togithub.com/mermaid-js/mermaid/pull/4719)
- standardized `error` diagram by
[@&#8203;Yokozuna59](https://togithub.com/Yokozuna59) in
[https://github.com/mermaid-js/mermaid/pull/4718](https://togithub.com/mermaid-js/mermaid/pull/4718)

#### Documentation

- Docs: Directives not needed in new diagrams as yaml formatter does
this for all new diagrams by
[@&#8203;Incognito](https://togithub.com/Incognito) in
[https://github.com/mermaid-js/mermaid/pull/4688](https://togithub.com/mermaid-js/mermaid/pull/4688)
- Docs: add latest blog post by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[https://github.com/mermaid-js/mermaid/pull/4668](https://togithub.com/mermaid-js/mermaid/pull/4668)
- Lychee config by [@&#8203;mmorel-35](https://togithub.com/mmorel-35)
in
[https://github.com/mermaid-js/mermaid/pull/4699](https://togithub.com/mermaid-js/mermaid/pull/4699)
- Syntax Update CONTRIBUTING.md by
[@&#8203;soomrozaid](https://togithub.com/soomrozaid) in
[https://github.com/mermaid-js/mermaid/pull/4713](https://togithub.com/mermaid-js/mermaid/pull/4713)

#### Chores

- chore(deps): update all minor dependencies (minor) by
[@&#8203;renovate](https://togithub.com/renovate) in
[https://github.com/mermaid-js/mermaid/pull/4682](https://togithub.com/mermaid-js/mermaid/pull/4682)
- build(deps-dev): bump json5 from 2.2.1 to 2.2.3 by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/mermaid-js/mermaid/pull/4685](https://togithub.com/mermaid-js/mermaid/pull/4685)
- build(deps): bump
[@&#8203;braintree/sanitize-url](https://togithub.com/braintree/sanitize-url)
from 6.0.0 to 6.0.1 by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/mermaid-js/mermaid/pull/4686](https://togithub.com/mermaid-js/mermaid/pull/4686)
- build(deps-dev): bump vite from 4.3.3 to 4.3.9 by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/mermaid-js/mermaid/pull/4687](https://togithub.com/mermaid-js/mermaid/pull/4687)
- chore(deps): update all patch dependencies (patch) by
[@&#8203;renovate](https://togithub.com/renovate) in
[https://github.com/mermaid-js/mermaid/pull/4681](https://togithub.com/mermaid-js/mermaid/pull/4681)
- chore: ts-ignore comment was misleading, JISON doesn't support types
by [@&#8203;Incognito](https://togithub.com/Incognito) in
[https://github.com/mermaid-js/mermaid/pull/4689](https://togithub.com/mermaid-js/mermaid/pull/4689)
- chore(deps): unpin the dompurify dependency by
[@&#8203;djadmin](https://togithub.com/djadmin) in
[https://github.com/mermaid-js/mermaid/pull/4677](https://togithub.com/mermaid-js/mermaid/pull/4677)
- build(deps-dev): bump pnpm from 8.3.1 to 8.6.8 by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[https://github.com/mermaid-js/mermaid/pull/4692](https://togithub.com/mermaid-js/mermaid/pull/4692)

#### New Contributors

- [@&#8203;keer4n](https://togithub.com/keer4n) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4670](https://togithub.com/mermaid-js/mermaid/pull/4670)
- [@&#8203;djadmin](https://togithub.com/djadmin) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4677](https://togithub.com/mermaid-js/mermaid/pull/4677)
- [@&#8203;danshuitaihejie](https://togithub.com/danshuitaihejie) made
their first contribution in
[https://github.com/mermaid-js/mermaid/pull/4705](https://togithub.com/mermaid-js/mermaid/pull/4705)
- [@&#8203;soomrozaid](https://togithub.com/soomrozaid) made their first
contribution in
[https://github.com/mermaid-js/mermaid/pull/4713](https://togithub.com/mermaid-js/mermaid/pull/4713)

**Full Changelog**:
mermaid-js/mermaid@v10.3.0...v10.3.1

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/levaintech/contented).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNi40MC4zIiwidXBkYXRlZEluVmVyIjoiMzYuNDMuMiIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
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.

Flowchart / Graph node containing keywords causes syntax error
3 participants