Adding railroad diagrams for SQL in console query page. #92
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The diagram is not properly generated as the css is not effective in the page.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Added railroad diagram for SQL in console query page.
Fixes: #290
I tried to generate the SVG diagram of SQL railroad diagram on the console query page. As per the suggesstion, I tried to use 'rrdiagram-js' package to generate a railroad diagram. However, it does not work as angular seems to have type definition issues with the package, as the package does not have any type definition for typescript.
So I generated the type definitions from the JSDoc, created the @types module, wrote the index.d.ts file, and published it to DefinitelyTyped. Now it is available for public use in npm.
Link to pull: DefinitelyTyped/DefinitelyTyped#69297
However, when I installed the types of the package, I figured out that the package has problems itself. Somehow angular was unable to resolve the module. After much investigation in Webpack docs and StackOverflow, I found the solution. The package.json file of the 'rrdiagram-js' has an error:
it has to be "main": "src/main.js" whereas it is written as "main": "main.js".
Then when ran it, I found out that the CSS of the SVG was not reflected on the page. So as a result, the diagram is not properly generated. It needs further investigation on how angular handles the CSS styles and resolution the error.
I also tried alternate packages. One good choice is 'railroad-diagrams'. It has almost 2.4 million weekly downloads, so hopefully the package is maintained regularly. However, when trying to implement with the Polypheny-UI, the same issue is found: the CSS for the SVG is not reflected on the page.
My pull contains the 'rrdiagram-js' implementation. Because the 'railroad-diagrams' package does not directly convert BNF to RR diagram, so the RR diagram needs to be carefully designed, whereas 'rrdiagram-js' will simply generate the diagram for BNF, and good BNFs of SQL are available online. So once the CSS error is resolved, it would be easier to implement with 'rrdiagram-js'.