@rmlio/matey/assets/html/matey.html

Web-based editor for YARRRML rules.

<div class="container">
    <p>
       Matey is a YARRRML editor that allows you to <b>try out your YARRRML rules</b>.
       Behind the scenes, the YARRRML rules are converted to RML rules and executed by
       the RMLMapper. Matey is made for people who want to try out YARRRML <b>without 
       installing anything</b>, in your browser. You can add your input data on the left (yellow box),
       write your YARRRML rules on the right (green box) and get the generated RDF (purple box).
       YARRRML also supports Targets which allows you to have multiple RDF outputs, you can find all
       generated RDF outputs in the dropdown menu of the purple box, together with the RML rules.
       Some examples are available as well to see how Matey works and get you started quickly.
       You can load those below by selecting one in the dropdown and click on the 'Load Example' button.
       Once loaded, you can edit them as you wish.
       A <b>tutorial</b> is available at <a href="https://rml.io/yarrrml/tutorial/getting-started/"
					    target="_blank">https://rml.io/yarrrml/tutorial/getting-started/</a>.
    </p>
    <p>
       We are conducting a <b>user study</b>
       to evaluate and improve Matey in the future regarding
       its user experience and usability, if you have a few minutes,
       <b>please leave your feedback 
       <a href="https://docs.google.com/forms/d/e/1FAIpQLScoWl8ssl_2cDJ3W1WSGL4vQthQsyVRaAnMx3_8XHCRUJuGjQ/viewform?usp=sf_link" target="_blank">here</a></b>.
    </p>
    <a class="anchor" id="edit-matey"></a>
    <div>
        <b>Select example to load:</b>&nbsp;<select id="examples-matey" class="custom-select"></select>&nbsp;
        <button id="example-btn-matey" type="button" class="btn btn-warning"
               title="Load the example into Matey, all changes will be lost!">Load Example</button>
    </div>

    <div id="alert-container-matey">
        <div style="padding: 5px">
            <div id="alerts-matey"></div>
        </div>
    </div>
</div>
<div style="margin: 15px">
    <div style="padding-bottom: 15px;">
        <button id="clear-btn-matey" type="button" class="btn btn-danger"
                title="Clear all input and state.">Clear ALL</button>
        <button id="ld-btn-matey" type="button" class="btn btn-success"
               title="Generate RDF based upon input data and YARRRML rules.">Generate RDF</button>
    </div>
    <div class="row mb-3">
        <div class="col-md-6" id="div-input-data-matey" style="background-color: rgba(255, 193, 7, 0.33); padding: 15px;">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle rounded-0" id="input-button-matey"
                        style="background-color: #2F3129; border-width: 0" type="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Input: Data sources
                </button>
                <span id="data-source-delete-matey">
                        <button class="btn btn-danger btn-sm" data-remove_id="' + id + '">&times;</button>
                    </span>
                <div class="dropdown-menu rounded-0" aria-labelledby="dropdownMenuButton">
                    <div class="nav" id="dropdown-data-chooser-matey">
                    </div>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item rounded-0" href="#" id="data-create-matey">Create new source</a>
                    <a class="dropdown-item rounded-0" href="#" id="data-load-matey">Load remote source (HTTP GET)</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item rounded-0" href="#" id="data-dl-matey">Download</a>
                </div>
            </div>
            <div id="data-matey" class="tab-content"></div>
        </div>
        <div class="col-md-6" id="div-yarrrml-matey" style="background-color: rgba(32, 201, 151, 0.33); padding: 15px;">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle rounded-0"
                        style="background-color: #2F3129; border-width: 0" type="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Input: YARRRML rules
                </button>
                <div class="dropdown-menu rounded-0" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item rounded-0" href="#" id="yarrrml-load-matey">Load remote rules (HTTP GET)</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item rounded-0" href="#" id="yarrrml-dl-matey">Download</a>
                </div>
            </div>
            <div id="editor-matey" class="ace-editor"></div>
        </div>
        <div class="col-md-12" id="div-output-data-matey" style="background-color: rgba(111, 66, 193, 0.33); padding: 15px;">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle rounded-0" id="output-button-matey"
                        style="background-color: #2F3129; border-width: 0" type="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Output: generated RDF
                </button>
                <div class="dropdown-menu rounded-0" aria-labelledby="dropdownMenuButton">
                    <div class="nav" id="dropdown-out-chooser-matey">
                    </div>
                    <a class="dropdown-item rounded-0" href="#" id="turtle-dl-matey">Download</a>
                </div>
            </div>
            <div id="output-matey" class="tab-content"></div>
        </div>
    </div>
</div>