graphdb-workbench
Version:
The web application for GraphDB APIs
311 lines (283 loc) • 16.1 kB
HTML
<link href="css/graphs-config.css?v=3.1.0-RC3" 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 text-tertiary"></span></span>
</h1>
<div class="card mb-2">
<div class="card-block" style="padding-top: 1rem">
<p class="lead">{{'config.name.label' | translate}}</p>
<div class="input-group input-group-lg">
<input required class="form-control graph-config-name" type="text"
placeholder="{{'graph.config.required' | translate}}" ng-model="newConfig.name">
</div>
<br/>
<p>{{'description.text' | translate}}</p>
<div class="input-group input-group-lg">
<input class="form-control graph-config-description" type="text"
placeholder="{{'enter.description' | translate}}"
ng-model="newConfig.description">
</div>
<div ng-if="newConfig.startMode === 'search'">
<br/>
<p>{{'hint.label' | translate}}</p>
<div class="input-group input-group-lg">
<input class="form-control graph-config-example" type="text"
placeholder="{{'add.hint.prompt' | translate}}"
ng-model="newConfig.hint">
</div>
</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' | translate}}"
popover-placement="top"
popover-trigger="mouseenter">
</span>
<span class="hidden-lg-down">{{'menu.help.label' | translate}}</span>
</button>
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabsViewModel track by tab.page" class="nav-item">
<a ng-class="page === tab.page ? 'active' : ''" ng-click="goToPage(tab.page)"
class="nav-link page-{{tab.page}}-link" href>
{{tab.label}}
</a>
</li>
</ul>
</div>
<div class="card" style="border-top: none">
<div class="graph-config-wizard-body card-block">
<div class="start-modes image-label-container" ng-show="page == 1">
<label class="start-mode search image-label d-flex" ng-class="{'active': newConfig.startMode === 'search'}">
<input type="radio" class="form-check-input" id="checkboxSuccessSearch"
ng-model="newConfig.startMode" value="search">
<img class="image-label-image" src="css/images/search.png?v=3.1.0-RC3" alt="search image"
width="100%">
<div class="image-label-content">
<h5>{{'start.with.search.box' | translate}}</h5>
<div>{{'choose.starting.point' | translate}}</div>
</div>
</label>
<label class="start-mode node image-label d-flex" ng-class="{'active': newConfig.startMode === 'node'}">
<input type="radio" class="form-check-input" id="checkboxSuccessNode" ng-model="newConfig.startMode"
value="node">
<img class="image-label-image" src="css/images/node.png?v=3.1.0-RC3" alt="node image"
width="100%">
<div class="image-label-content">
<h5>{{'start.with.fixed.node' | translate}}</h5>
<div>{{'visual.graph.start' | translate}}</div>
</div>
</label>
<label class="start-mode query image-label d-flex" ng-class="{'active': newConfig.startMode === 'query'}">
<input type="radio" class="form-check-input" data-cy="graph-config-by-graph-query-checkbox"
ng-model="newConfig.startMode" value="query">
<img class="image-label-image" src="css/images/query.png?v=3.1.0-RC3" alt="query image"
width="100%">
<div class="image-label-content">
<h5>{{'query.results.start' | translate}}</h5>
<div>{{'results.start' | translate}}</div>
</div>
</label>
</div>
<div class="start-node-selector form-group card mt-2 mb-0"
ng-show="newConfig.startMode === 'node' && page === 1">
<div class="card-block">
<p class="lead selected-node" ng-show="newConfig.startIRI">
<strong>{{'selected.node' | translate}}</strong>
<code
ng-bind="newConfig.startIRILabel ? newConfig.startIRILabel + '<' + newConfig.startIRI + '>' : newConfig.startIRI"></code>
<em ng-hide="newConfig.startIRI" class="text-muted">{{'no.node.selected' | translate}}</em>
</p>
<p class="lead" ng-hide="newConfig.startIRI">
<strong>{{'no.node.selected' | translate}}</strong>
</p>
<search-resource-input
repository-namespaces="repositoryNamespaces"
placeholder="{{'search.start.rdf.node' | translate}}"
is-autocomplete-enabled="isAutocompleteEnabled"
text-button=""
visual-button=""
visual-callback="fixedVisualCallback(uri, label)"
empty="empty">
</search-resource-input>
</div>
</div>
<!-- help info boxes -->
<div uib-collapse="helpHidden" class="wizard-help alert alert-info no-icon p-1 mb-2" ng-if="page != 1">
<div class="help-box 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' | translate}} <span class="small-caps">CONSTRUCT</span>
{{'construct.query.explanation' | translate}}</p>
<p>{{'the.sentence.start' | translate}} <code>?node</code> {{'variable.required' | translate}}</p>
<p>{{'optional.query' | translate}} <em ng-if="samples && samples.length > 0">{{getSampleName(samples[0], 'expandQuery')}}</em>
{{'sample.query.used' | translate}}</p>
</div>
<div>
<img src="css/images/expand.png?v=3.1.0-RC3" class="info-box-img" height="220"
alt="expand image">
</div>
</div>
<div class="help-box d-flex" ng-if="page == 3">
<button class="close absolute" ng-click="toggleHelp(0)"></button>
<div class="alert alert-help">
<p class="lead">
{{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span>
{{'query.node.basic.info' | translate}}
</p>
<p>{{'query.must' | translate}} <span class="small-caps">SELECT</span>
{{'one.or.more.bindings' | translate}}</p>
<ul>
<li><code>?type</code> {{'determines.color' | translate}}</li>
<li><code>?label</code> {{'determines.label' | translate}}</li>
<li><code>?comment</code> {{'determines.description' | translate}}</li>
<li><code>?rank</code> {{'determines.size' | translate}}</li>
</ul>
<p>{{'the.sentence.start' | translate}} <code>?node</code> {{'variable.required' | translate}}</p>
<p>{{'optional.query' | translate}} <em ng-if="samples && samples.length > 0">{{getSampleName(samples[0], 'resourceQuery')}}</em>
{{'sample.query.used' | translate}}</p>
</div>
<div>
<img src="css/images/labels-size.png?v=3.1.0-RC3" class="info-box-img" height="220"
alt="labels size image">
</div>
</div>
<div class="help-box d-flex" ng-if="page == 4">
<button class="close absolute" ng-click="toggleHelp(0)"></button>
<div class="alert alert-help">
<p class="lead">{{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span>
{{'query.edge.basic.info' | translate}}</p>
<p>{{'query.must' | translate}} <span class="small-caps">SELECT</span> {{'this.binding' | translate}}
</p>
<ul>
<li><code>?label</code> {{'determines.label.edge' | translate}}</li>
</ul>
<p>{{'the.sentence.start' | translate}} <code>?edge</code> {{'variable.required.edge' | translate}}
</p>
<p>{{'query.is.optional.local.name' | translate}}</p>
</div>
<div>
<img src="css/images/predicates.png?v=3.1.0-RC3" class="info-box-img" height="220"
alt="predicates image">
</div>
</div>
<div class="help-box d-flex" ng-if="page == 5">
<button class="close absolute" ng-click="toggleHelp(0)"></button>
<div class="alert alert-help">
<p class="lead">{{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span>
{{'extra.properties.shown.node' | translate}}</p>
<p>{{'query.must' | translate}} <span class="small-caps">SELECT</span>
{{'these.bindings' | translate}}</p>
<ul>
<li><code>?property</code> {{'name.of.each.property' | translate}}</li>
<li><code>?value</code> {{'value.of.each.property' | translate}}</li>
</ul>
<p>{{'query.may.also' | translate}} <span class="small-caps">SELECT</span>
{{'this.binding' | translate}}</p>
<ul>
<li><code>?image</code> {{'url.to.image.properties' | translate}}</li>
</ul>
<p>{{'the.sentence.start' | translate}} <code>?node</code>
{{'variable.required.viewed.node' | translate}}</p>
<p>{{'optional.query' | translate}}
<em ng-if="samples && samples.length > 0">{{getSampleName(samples[0], 'resourcePropertiesQuery')}}</em>
{{'sample.query.used' | translate}}</p>
</div>
<div>
<img src="css/images/side-panel.png?v=3.1.0-RC3" class="info-box-img" height="220"
alt="side panel image">
</div>
</div>
</div>
<div class="form-group row pt-2 mb-0" ng-hide="page == 1 && newConfig.startMode !== 'query'">
<div class="col-md-9">
<yasgui-component id="query-editor" class="" yasgui-config="yasguiConfig"
query-changed="markDirty()"></yasgui-component>
</div>
<div class="sample-queries col-md-3">
<p>{{'sample.queries' | translate}} </p>
<div ng-repeat="tab in tabsViewModel track by tab.page" ng-if="tab.page === page"
class="predefined-queries list-group">
<div ng-repeat="sample in samples | filter:isDefaultGraph">
<a href="#" ng-if="sample[tab.type]" ng-click="setQuery(sample[tab.type])"
class="predefined-query list-group-item list-group-item-action">
<strong ng-bind="getSampleName(sample, tab.type)"></strong>
<samp class="text-muted small">{{sample[tab.type]}}</samp>
</a>
</div>
</div>
<p class="mt-1">{{'user.queries' | translate}} </p>
<div ng-repeat="tab in tabsViewModel track by tab.page" ng-if="tab.page === page"
class="user-queries list-group">
<div ng-repeat="sample in samples | filter:isUserGraph">
<a href="#" ng-if="sample[tab.type]" ng-click="setQuery(sample[tab.type])"
class="user-query list-group-item list-group-item-action">
<strong ng-bind="getSampleName(sample, tab.type)"></strong>
<samp class="text-muted small">{{sample[tab.type]}}</samp>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-0 clearfix" style="padding-bottom: 2rem">
<div>
<label for="share-graph-config"
gdb-tooltip="{{'visual.graph.other.users.see' | translate}}">
<input id="share-graph-config" type="checkbox" ng-model="newConfig.shared">
{{'share.visual.graph' | translate}}
</label>
</div>
<div class="pull-left">
<button href ng-show="page > 1" ng-click="goToPreviousPage()" class="btn btn-lg btn-secondary btn-previous-page"
uib-popover="{{'previous.config.step' | translate}}"
popover-placement="top"
popover-trigger="mouseenter"><span class="icon-arrow-left"></span> {{'previous.btn' | translate}}
</button>
<button href ng-show="page < totalPages" ng-click="goToNextPage()" class="btn btn-lg btn-secondary btn-next-page"
uib-popover="{{'next.config.step' | translate}}"
popover-placement="top"
popover-trigger="mouseenter"> {{'next.btn' | translate}} <span class="icon-arrow-right"></span>
</button>
<button class="btn btn-lg btn-secondary btn-preview-query-results" ng-click="showPreview()"
ng-hide="viewMode == 'editor' || (page == 1 && newConfig.startMode != 'query')"
uib-popover="{{'preview.results' | translate}}"
popover-placement="top"
popover-trigger="mouseenter">
{{'common.preview' | translate}}
</button>
<button class="btn btn-lg btn-secondary btn-show-query-editor" ng-click="showEditor()"
ng-show="viewMode == 'editor' && (page != 1 || newConfig.startMode == 'query')"
uib-popover="{{'closes.preview' | translate}}"
popover-placement="top"
popover-trigger="mouseenter">
{{'core.edit.query' | translate}}
</button>
<button class="btn btn-lg btn-secondary btn-revert-query" ng-click="revertEditor()" ng-disabled="!queryEditorIsDirty"
ng-hide="!revertConfig || viewMode == 'editor' || (page == 1 && newConfig.startMode != 'query')"
uib-popover="{{'reverts.changes' | translate}}"
popover-placement="top"
popover-trigger="mouseenter">
{{'revert.changes.btn' | translate}}
</button>
</div>
<div class="pull-right">
<a ng-href="graphs-visualizations/" class="btn btn-lg btn-secondary btn-cancel-save-config"
uib-popover="{{'closes.config.no.save' | translate}}"
popover-placement="top"
popover-trigger="mouseenter">
{{'common.cancel.btn' | translate}}
</a>
<a href ng-click="saveGraphConfig()" class="btn btn-lg btn-primary btn-save-config"
uib-popover="{{'closes.config.save' | translate}}"
popover-placement="top"
popover-trigger="mouseenter">
{{'common.save.btn' | translate}}
</a>
</div>
</div>