Custom query feature (cosmetic): augment SPARQL edit fields with syntax coloring and validation

[mvanbrab]

See YASGUI

[EmilioTR]

I started resolving this issue but I had no time to finish it anymore. Hereby I will give a little summary of what happened already and what still should.

All the changes are on the branch: fix-143-sparql-highlight

I implemented Yasqe (this is a component of YASGUI, see link above). I tried multiple options like codemirror and this turned out to be the best. It does use codemirror but has a better implementation for this use case.

I made a jsx component called yasqe.jsx under components/CustomQueryEditor/yasqe.jsx. This is just the inputfield that looks like this:

This should replace the <TextField>-component for every field where you have to fill in a SPARQL query in the current form. Those are the 'sparql query' field inside basic information, the 'sparql query' field inside the indirect sources option and all the 'sparql query' fields for the templated query with indirect variables option.

The reason we want this is to have a cleaner look when creating custom queries and have direct feedback on the query syntax. At this moment it is just a simple textarea without syntax validation.

Difficulties:

• Make the Yasqe field work correctly like an inputfield part of the form
• The value should be added to the formentries so that it can be handled correctly whilst submitting (look at lines [100 - 110] in the editor component at components/CustomQueryEditor/customEditor.jsx
• When editting the query, this field should be filled in correctly too
• Make it required
• Putting a sort of validator around it, that it is impossible to submit as long as there is a syntax error