Package Exports

@triply/yasgui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@triply/yasgui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

YASGUI

Handy features

Some of our styling will conflict with Bootstrap therefore you are able to import yasgui.bootstrap.css after the Bootstrap import

Update procedures

Nightly

The Yasgui nightly instance is a docker image, and accessible at https://nightly.yasgui.triply.cc
The docker image is built on every push to the Yasgui repo. We are currently working on updating at every push, really
That build with install the latest Yasqe and Yasr version available. I.e., the include any Yasqe and Yasr, you need to npm publish these changes (you do not need to manually update the yasqe/yasr deps in yasgui as well)

Regular dependencies, like triply-console

Make sure you have published the latest yasgui changes (npm version patch|minor|major && npm publish)
Update the yasgui dependency in triply-console

Running locally

Command npm run dev starts a YASGUI endpoint at localhost:4002.

Supported key combinations

| Key combination | Behavior | |---------------------+--------------| | Ctrl+/ | Toggles whether the current line or all lines involved in the current selection are commented out. | | Ctrl+Shift+F | Auto-format the whole query. | | Tab | Indents either the current line or all lines involved in the current selection. |

Data Stories

How to use

In order to use Data Stories in an HTML page, include the following at the bottom of the HTML page, but still within the <body> tag:

<script type="text/javascript">window.onload = function () { Yasgui.stories() };</script>

For example, this is a minimal HTML page with Data Stories support:

<!doctype html>
<html>
  <head>
    <link href="https://nightly.yasgui.triply.cc/build/yasgui.min.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <query data-query-ref="test.rq" endpoint="https://data.lodlaundromat.org/_api/datasets/wouter/meta/services/meta/sparql"></query>
    <script src="https://nightly.yasgui.triply.cc/build/yasgui.min.js"></script>
    <script type="text/javascript">window.onload = function () { Yasgui.stories() };</script>
  </body>
</html>

Polyfills

This segment cointais polyfills which required for running yasgui in (at least) IE11

Query configuration options

A Data Story is a sequence of <query> tags. The following HTML attributes are defined for <query> tags:

| Attribute | Example value | Usage | |-------------------+----------------------------------------------+----------------------------------------------------------------------------------| | data-config | https://yasgui.org/short/Byy9X6EVQ | Used for reading the configuration of links created by the YASGUI share function | | data-query-ref | stories/q3.rq | should point to a file containing a query. Used for keeping your html clean | | data-endpoint | https://www.dbpedia.org/sparql | The endpoint on which query should take place | | data-output | gallery, gchart, geo, geo3d, table | Used to set which view is used to represent the query results | | data-show-query | true | Used to show the query directly to the user |

These attributes can also be used in a parent tag, which sets the attribute for each enclosed <query> tag.

Examples of queries

<query data-query-ref="stories/q1.rq" data-endpoint="https://dbpedia.org/sparql" data-output="geo"></query>

<query data-config="https://yasgui.org/short/Byy9X6EVQ" data-output="gallery"></query>