anujk14/xml-to-blockly

Takes RelaxNG schema as input and generates corresponding code for a Blockly block to represent the same

Introduction

This project is funded by the 2016 edition of the Google Summer of Code program. Anuj Khandelwal has been selected to work on a Graphical workflow editor for eHive using Blockly in the Ensembl Genomes Browser organization under the supervision of Matthieu Muffato and Leo Gordon.

eHive is a system used to run computation pipelines in distributed environments. Currently the eHive workflows are configured in a specific file format that requires basic programming skills. This project aims at removing this drawback by creating a graphical editor for eHive workflows using Google's Blockly library.

We are envisaging XML as the file format, with a Relax NG specification. The backbone of this graphical editor would be an automated conversion of a Relax NG specification to Blockly blocks and matching rules so that the Blockly diagrams conform to the specification. The graphical interface will have to be able to import existing XML files to visualize them in terms of Blockly blocks, edit them, and export the diagram back to XML.

The project submitted to Google is not specific to eHive and the proposed editor should be able of handling any specifications written using the Relax NG schema.

How to use

1. Open https://ensembl.github.io/XML-To-Blockly/ in your web browser.
2. Select one of the examples or click on the 'Choose file' and open your own Relax NG file. This will create a list of blocks in the toolbox.
3. Play with the blocks to create a diagram that follows the specification.
4. Export the diagram as XML by clicking on the "Diagram validation and export into XML" tab.

We also provide a full-size editor which can be configured to automatically load an RNG file.

Current state

1. Web page with a Blockly workspace, an RNG text-area and an XML text-area.
2. Javascript code to parse an RNG file and create Blockly blocks
3. Simplification of the RNG file to produce a minimum number of Blockly blocks
4. Pretty naming of Blockly blocks.
5. Blockly rules to allow the right connections between blocks
6. Extra validator for the constraints that cannot be modeled in Blockly
7. Javascript code to export of the diagram to XML.
8. Javascript code to import of an XML to the Blockly workspace

Supported RNG elements

This table lists the XML patterns from http://relaxng.org/spec-20011203.html that are understood by the parser

		XML pattern	Supported ?
pattern	::=	<element name="QName"> pattern+ </element>	✅
		| <element> nameClass pattern+ </element>	✅ (only <name> QName </name> )
		| <attribute name="QName"> [pattern] </attribute>	✅
		| <attribute> nameClass [pattern] </attribute>	✅ (only <name> QName </name> )
		| <group> pattern+ </group>	✅
		| <interleave> pattern+ </interleave>	✅
		| <choice> pattern+ </choice>	✅
		| <optional> pattern+ </optional>	✅
		| <zeroOrMore> pattern+ </zeroOrMore>	✅
		| <oneOrMore> pattern+ </oneOrMore>	✅
		| <list> pattern+ </list>	❌
		| <mixed> pattern+ </mixed>	❌
		| <ref name="NCName"/>	✅
		| <parentRef name="NCName"/>	❌
		| <empty/>	❌
		| <text/>	✅
		| <value [type="NCName"]> string </value>	❌
		| <data type="NCName"> param* [exceptPattern] </data>	✅ (some, see below)
		| <notAllowed/>	❌
		| <externalRef href="anyURI"/>	❌
		| <grammar> grammarContent* </grammar>	✅
param	::=	<param name="NCName"> string </param>	❌
exceptPattern	::=	<except> pattern+ </except>	❌
grammarContent	::=	start	✅
		| define	✅
		| <div> grammarContent* </div>	❌
		| <include href="anyURI"> includeContent* </include>	❌
includeContent	::=	start	❌
		| define	❌
		| <div> includeContent* </div>	❌
start	::=	<start [combine="method"]> pattern </start>	✅ (but not the combine option)
define	::=	<define name="NCName" [combine="method"]> pattern+ </define>	✅
method	::=	choice	❌
		| interleave	❌
nameClass	::=	<name> QName </name>	✅
		| <anyName> [exceptNameClass] </anyName>	❌
		| <nsName> [exceptNameClass] </nsName>	❌
		| <choice> nameClass+ </choice>	❌
exceptNameClass	::=	<except> nameClass+ </except>	❌

RNG to Blockly mapping

Here is how RNG patterns are mapped to Blockly content.

RNG pattern	Blockly InputStatements and Fields
<text/>	TextField (unnamed)
<attribute/>	TextField (named)
<attribute> <text> ... </text> </attribute>	TextField (named)
<attribute> <data type="string"> ... </data> </attribute>	TextField (named) + typeChecker
<attribute> <choice> [values] </choice> </attribute>	DropDown (named)
<attribute> [all other cases] </attribute>	DisplayLabel with a tree-display of all the children
<element/>	DisplayLabel
<element> <text> ... </text> </element>	TextField (named)
<element> <data type="string"> ... </data> </element>	TextField (named) + typeChecker
<element> <choice> [values] </choice> </element>	DropDown (named)
<element> [all other cases] </element>	DisplayLabel with a tree-display of all the children
<group> ... </group>	All the children stacked vertically
<group name=".."> ... </group>	DisplayLabel with a tree-display of all the children
<optional> [tree with no magic block] </optional>	CheckBox that controls a tree-display of all the children

We call magic tag the <oneOrMore>, <zeroOrMore>, <optional>, <choice> and interleave tags because their content is variable and cannot be fixed in a single block. They lead to the creation of additional blocks. The only two exceptions are special occurrences of <optional> and <choice> (see above).