graphdb-workbench/dist/pages/graph-config/saveGraphConfig.html

The web application for GraphDB APIs

<link href="css/lib/angular-xeditable/xeditable.min.css?v=1.11.3-TR1" rel="stylesheet">

<link href="css/lib/yasqe.min.css?v=1.11.3-TR1" rel="stylesheet"/>

<link href="css/new-sparql.css?v=1.11.3-TR1" rel="stylesheet"/>

<link href="css/graphs-config.css?v=1.11.3-TR1" rel="stylesheet"/>

<h1>
    {{title}}
    <span class="btn btn-link"
          uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
          popover-trigger="mouseenter"
          popover-placement="bottom-right"
          popover-append-to-body="true"><span class="icon-info"></span></span>
</h1>

<div class="card mb-2">
    <div class="card-block" style="padding-top: 1rem">
        <p class="lead">Config name</p>
        <div class="input-group input-group-lg">
            <input required class="form-control graph-config-name" type="text" placeholder="My graph config (required)" ng-model="newConfig.name" >
        </div>
    </div>
</div>

<div>
    <button ng-show="page != 1" type="button" class="btn btn-link pull-right" ng-click="toggleHelp()">
        <span class="icon-help" uib-popover="Toggle help"
                                popover-placement="top"
                                popover-trigger="mouseenter">
        </span>
        <span class="hidden-lg-down">Help</span></button>
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a ng-class="page == 1 ? 'active' : ''" ng-click="goToPage(1)" class="nav-link page-1-link" href>
                Starting point
            </a>
        </li>
        <li class="nav-item">
            <a ng-class="page == 2 ? 'active' : ''" ng-click="goToPage(2)" class="nav-link page-2-link" href>
                Graph expansion
            </a>
        </li>

        <li class="nav-item">
            <a ng-class="page == 3 ? 'active' : ''" ng-click="goToPage(3)" class="nav-link page-3-link" href>
                Node basics
            </a>
        </li>
        <li class="nav-item">
            <a ng-class="page == 4 ? 'active' : ''" ng-click="goToPage(4)" class="nav-link page-4-link" href>
                Edge basics
            </a>
        </li>
        <li class="nav-item">
            <a ng-class="page == 5 ? 'active' : ''" ng-click="goToPage(5)" class="nav-link page-5-link" href>
                Node extra
            </a>
        </li>
    </ul>
</div>
<div class="card" style="border-top: none">
    <div class="card-block">
        <div>

                <div class="image-label-container mb-3" ng-show="page == 1">
                    <label class="image-label d-flex" ng-class="{'active': newConfig.startMode == 'search'}">
                        <input type="radio" class="form-check-input" id="checkboxSuccess" ng-model="newConfig.startMode" value="search">
                        <img class="image-label-image" src="css/images/search.png?v=1.11.3-TR1" alt="search image" width="100%">
                        <div class="image-label-content">
                            <h5>Start with a search box</h5>
                            <div>Choose the starting point of your visual graph every time</div>
                        </div>
                    </label>

                    <label class="image-label d-flex" ng-class="{'active': newConfig.startMode == 'node'}">
                        <input type="radio" class="form-check-input" id="checkboxSuccess" ng-model="newConfig.startMode" value="node">
                        <img class="image-label-image" src="css/images/node.png?v=1.11.3-TR1" alt="node image" width="100%">
                        <div class="image-label-content">
                            <h5>Start with a fixed node</h5>
                            <div>The visual graph will always start from the chosen node.</div>
                        </div>
                    </label>

                    <label class="image-label d-flex" ng-class="{'active': newConfig.startMode == 'query'}">
                        <input type="radio" class="form-check-input" id="checkboxSuccess" ng-model="newConfig.startMode" value="query">
                        <img class="image-label-image" src="css/images/query.png?v=1.11.3-TR1" alt="query image" width="100%">
                        <div class="image-label-content">
                            <h5>Start with graph query results</h5>
                            <div>The results from your query will be the starting point of the visual graph.</div>
                        </div>
                    </label>
                </div>

                <div class="form-group card mb-2" ng-show="newConfig.startMode == 'node' && page == 1">
                    <div class="card-block">
                        <p class="lead" ng-show="newConfig.startIRI">
                            <strong>Selected node:</strong>
                            <code ng-bind="newConfig.startIRILabel ? newConfig.startIRILabel + '<' + newConfig.startIRI + '>' : newConfig.startIRI"></code>
                            <em ng-hide="newConfig.startIRI" class="text-muted">No node selected</em>
                        </p>
                        <p class="lead" ng-hide="newConfig.startIRI">
                            <strong>No node selected</strong>
                        </p>
                        <search-resource-input
                            namespacespromise="getNamespacesPromise"
                            placeholder="Search start RDF node..."
                            autocompletepromisestatus="getAutocompletePromise"
                            text-button=""
                            visual-button=""
                            visual-callback="fixedVisualCallback(uri, label)"
                            empty="empty">
                        </search-resource-input>
                    </div>
                </div>
                <!-- help info boxes -->
                <div uib-collapse="helpHidden" class="alert alert-info no-icon p-1 mb-2" ng-if="page != 1">
                   <div class="d-flex" ng-if="page == 2">
                        <button class="close absolute" ng-click="toggleHelp(0)"></button>
                        <div class="alert alert-help">
                            <p class="lead">This is a <span class="small-caps">CONSTRUCT</span> query that determines which nodes and edges are added to the graph when the user expands an existing node.</p>

                            <p>The <code>?node</code> variable is required and will be replaced with the IRI of the expanded node.</p>

                            <p>This query is optional. If empty, the <em>{{getSampleName(samples[0], 'expandQuery')}}</em> sample query will be used.</p>
                        </div>
                        <div>
                            <img src="css/images/expand.png?v=1.11.3-TR1" class="info-box-img" height="220" alt="expand image">
                        </div>
                    </div>



                    <div class="d-flex" ng-if="page == 3">
                        <button class="close absolute" ng-click="toggleHelp(0)"></button>
                        <div class="alert alert-help">
                            <p class="lead">
                                This <span class="small-caps">SELECT</span> query determines the basic information about a node.
                                Some of that information affects the colour and size of the node.
                            </p>

                            <p>The query must <span class="small-caps">SELECT</span> one or more of these bindings:</p>
                            <ul>
                                <li><code>?type</code> determines the colour. If missing, all nodes will have the same colour.</li>
                                <li><code>?label</code> determines the label of the node. If missing, the IRI's local name will be used.</li>
                                <li><code>?comment</code> determines the description of the node. If missing, no description will be provided.</li>
                                <li><code>?rank</code> determines the size of the node and it must be a real number between 0 and 1. If missing, all nodes will have same size.</li>
                            </ul>

                            <p>The <code>?node</code> variable is required and will be replaced with the IRI of the expanded node.</p>

                            <p>This query is optional. If empty, the <em>{{getSampleName(samples[0], 'resourceQuery')}}</em> sample query will be used.</p>
                        </div>
                        <div>
                            <img src="css/images/labels-size.png?v=1.11.3-TR1" class="info-box-img" height="220" alt="labels size image">
                        </div>
                    </div>

                    <div class="d-flex" ng-if="page == 4">
                        <button class="close absolute" ng-click="toggleHelp(0)"></button>
                        <div class="alert alert-help">
                            <p class="lead">This <span class="small-caps">SELECT</span> query determines the basic information about an edge.</p>

                            <p>The query must <span class="small-caps">SELECT</span> this binding:</p>
                            <ul>
                                <li><code>?label</code> determines the label of the edge. If missing, the IRI's local name will be used.</li>
                            </ul>

                            <p>The <code>?edge</code> variable is required and will be replaced with the IRI of the edge.</p>

                            <p>This query is optional. If empty, the edge IRI's local name is used.</p>
                        </div>
                        <div>
                            <img src="css/images/predicates.png?v=1.11.3-TR1" class="info-box-img" height="220" alt="predicates image">
                        </div>
                    </div>

                    <div class="d-flex" ng-if="page == 5">
                        <button class="close absolute" ng-click="toggleHelp(0)"></button>
                        <div class="alert alert-help">
                            <p class="lead">This <span class="small-caps">SELECT</span> query determines the extra properties shown for a node when the info icon is clicked.</p>

                            <p>The query must <span class="small-caps">SELECT</span> these bindings:</p>
                            <ul>
                                <li><code>?property</code> is the name of each property.</li>
                                <li><code>?value</code> is the value of each property.</li>
                            </ul>

                            <p>The query may also <span class="small-caps">SELECT</span> this binding:</p>
                            <ul>
                                <li><code>?image</code> is a URL to an image that will be shown together with the properties.</li>
                            </ul>

                            <p>The <code>?node</code> variable is required and will be replaced with the IRI of the viewed node.</p>

                            <p>This query is optional. If empty, the <em>{{getSampleName(samples[0], 'resourcePropertiesQuery')}}</em> sample query will be used.</p>
                        </div>
                        <div>
                            <img src="css/images/side-panel.png?v=1.11.3-TR1" class="info-box-img" height="220" alt="side panel image">
                        </div>
                    </div>

                </div>


                <div class="form-group row" ng-hide="page == 1 && newConfig.startMode != 'query'">
                    <div class="col-md-9">
                        <query-editor nostorage notabs notoolbar-saved notoolbar-copy nostatus nocount norun callback-on-change="updateDirty">
                        </query-editor>
                    </div>
                    <div class="col-md-3">
                        <p>Sample queries: </p>

                        <div ng-show="page == 1" class="list-group">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.startGraphQuery" ng-click="setQuery(sample.startGraphQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'startGraphQuery')"></strong>
                                    <samp class="text-muted small">{{sample.startGraphQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 2" class="list-group expand-samples">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.expandQuery" ng-click="setQuery(sample.expandQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'expandQuery')"></strong>
                                    <samp class="text-muted small">{{sample.expandQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 3" class="list-group">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.resourceQuery" ng-click="setQuery(sample.resourceQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'resourceQuery')"></strong>
                                    <samp class="text-muted small">{{sample.resourceQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 4" class="list-group">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.predicateLabelQuery" ng-click="setQuery(sample.predicateLabelQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'predicateLabelQuery')"></strong>
                                    <samp class="text-muted small">{{sample.predicateLabelQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 5" class="list-group">
                            <div ng-repeat="sample in samples | filter:isDefaultGraph">
                                <a href="#" ng-if="sample.resourcePropertiesQuery" ng-click="setQuery(sample.resourcePropertiesQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'resourcePropertiesQuery')"></strong>
                                    <samp class="text-muted small">{{sample.resourcePropertiesQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <p class="mt-1">User queries: </p>

                        <div ng-show="page == 1" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.startGraphQuery" ng-click="setQuery(sample.startGraphQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'startGraphQuery')"></strong>
                                    <samp class="text-muted small">{{sample.startGraphQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 2" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.expandQuery" ng-click="setQuery(sample.expandQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'expandQuery')"></strong>
                                    <samp class="text-muted small">{{sample.expandQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 3" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.resourceQuery" ng-click="setQuery(sample.resourceQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'resourceQuery')"></strong>
                                    <samp class="text-muted small">{{sample.resourceQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 4" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.predicateLabelQuery" ng-click="setQuery(sample.predicateLabelQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'predicateLabelQuery')"></strong>
                                    <samp class="text-muted small">{{sample.predicateLabelQuery}}</samp>
                                </a>
                            </div>
                        </div>

                        <div ng-show="page == 5" class="list-group">
                            <div ng-repeat="sample in samples | filter:isUserGraph">
                                <a href="#" ng-if="sample.resourcePropertiesQuery" ng-click="setQuery(sample.resourcePropertiesQuery)" class="list-group-item list-group-item-action">
                                    <strong ng-bind="getSampleName(sample, 'resourcePropertiesQuery')"></strong>
                                    <samp class="text-muted small">{{sample.resourcePropertiesQuery}}</samp>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>


        </div>
    </div>
</div>

<div class="m-0 clearfix" style="padding-bottom: 2rem">
    <div>
        <label for="share-graph-config"
               uib-tooltip="If checked other users will be able to see the visual graph, but not delete or edit it.">
            <input id="share-graph-config" type="checkbox" ng-model="newConfig.shared">
            Share visual graph with other users
        </label>
    </div>
    <div class="pull-left">
        <a href ng-click="saveGraphConfig()" class="btn btn-lg btn-primary btn-save-config"
            uib-popover="Closes configuration and saves all changes."
            popover-placement="top"
            popover-trigger="mouseenter">
            Save
        </a>
        <button class="btn btn-lg btn-secondary" ng-click="showPreview()" ng-hide="viewMode == 'editor' || (page == 1 && newConfig.startMode != 'query')"
            uib-popover="Executes the SPARQL query and shows a preview of the results. Only the first 100 results will be shown."
            popover-placement="top"
            popover-trigger="mouseenter">
            Preview
        </button>
        <button class="btn btn-lg btn-secondary" ng-click="showEditor()" ng-show="viewMode == 'editor' && (page != 1 || newConfig.startMode == 'query')"
            uib-popover="Closes the preview and shows the query editor."
            popover-placement="top"
            popover-trigger="mouseenter">
            Edit query
        </button>
        <button class="btn btn-lg btn-secondary" ng-click="revertEditor()" ng-disabled="!queryEditorIsDirty" ng-hide="!revertConfig || viewMode == 'editor' || (page == 1 && newConfig.startMode != 'query')"
                uib-popover="Reverts the changes in the query editor."
                popover-placement="top"
                popover-trigger="mouseenter">
            Revert changes
        </button>
    </div>
    <div class="pull-right">
        <button href ng-show="page > 1" ng-click="goToPreviousPage()" class="btn btn-lg btn-secondary"
                uib-popover="Go to previous configuration step."
                popover-placement="top"
                popover-trigger="mouseenter"> <span class="icon-arrow-left"></span> Previous </button>

        <button href ng-show="page < totalPages" ng-click="goToNextPage()" class="btn btn-lg btn-secondary"
                uib-popover="Go to next configuration step."
                popover-placement="top"
                popover-trigger="mouseenter"> Next <span class="icon-arrow-right"></span></button>

        <a ng-href="/graphs-visualizations/" class="btn btn-lg btn-secondary"
            uib-popover="Closes the configuration without saving the changes."
            popover-placement="top"
            popover-trigger="mouseenter">
            Cancel
        </a>
    </div>
</div>