graphdb-workbench 2.5.1 → 2.6.0-RC1

package/dist/pages/graph-config/saveGraphConfig.html

@@ -1,10 +1,4 @@
-<link href="css/lib/angular-xeditable/xeditable.min.css?v=2.5.1" rel="stylesheet">
-
-<link href="css/lib/yasqe.min.css?v=2.5.1" rel="stylesheet"/>
-
-<link href="css/new-sparql.css?v=2.5.1" rel="stylesheet"/>
-
-<link href="css/graphs-config.css?v=2.5.1" rel="stylesheet"/>
+<link href="css/graphs-config.css?v=2.6.0-RC1" rel="stylesheet"/>
 
 <h1>
     {{title}}
@@ -19,22 +13,23 @@
     <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" >
+            <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" >
+                   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" >
+                <input class="form-control graph-config-example" type="text"
+                       placeholder="{{'add.hint.prompt' | translate}}"
+                       ng-model="newConfig.hint">
             </div>
         </div>
     </div>
@@ -43,282 +38,216 @@
 <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">
+              popover-placement="top"
+              popover-trigger="mouseenter">
         </span>
-        <span class="hidden-lg-down">{{'menu.help.label' | translate}}</span></button>
+        <span class="hidden-lg-down">{{'menu.help.label' | translate}}</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.label' | translate}}
-            </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' | translate}}
-            </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' | translate}}
-            </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' | translate}}
-            </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' | translate}}
+        <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="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="checkboxSuccessSearch" ng-model="newConfig.startMode" value="search">
-                        <img class="image-label-image" src="css/images/search.png?v=2.5.1" 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="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=2.5.1" 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="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=2.5.1" alt="query image" width="100%">
-                        <div class="image-label-content">
-                            <h5>{{'query.results.start' | translate}}</h5>
-                            <div>{{'results.start' | translate}}</div>
-                        </div>
-                    </label>
+<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=2.6.0-RC1" alt="search image"
+                     width="100%">
+                <div class="image-label-content">
+                    <h5>{{'start.with.search.box' | translate}}</h5>
+                    <div>{{'choose.starting.point' | translate}}</div>
                 </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' | 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
-                            namespacespromise="getNamespacesPromise"
-                            placeholder="{{'search.start.rdf.node' | translate}}"
-                            autocompletepromisestatus="getAutocompletePromise"
-                            text-button=""
-                            visual-button=""
-                            visual-callback="fixedVisualCallback(uri, label)"
-                            empty="empty">
-                        </search-resource-input>
-                    </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=2.6.0-RC1" alt="node image"
+                     width="100%">
+                <div class="image-label-content">
+                    <h5>{{'start.with.fixed.node' | translate}}</h5>
+                    <div>{{'visual.graph.start' | translate}}</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' | 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>{{getSampleName(samples[0], 'expandQuery')}}</em> {{'sample.query.used' | translate}}</p>
-                        </div>
-                        <div>
-                            <img src="css/images/expand.png?v=2.5.1" 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.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>{{getSampleName(samples[0], 'resourceQuery')}}</em> {{'sample.query.used' | translate}}</p>
-                        </div>
-                        <div>
-                            <img src="css/images/labels-size.png?v=2.5.1" class="info-box-img" height="220" alt="labels size image">
-                        </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=2.6.0-RC1" 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="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>
+        <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
+                    namespacespromise="getNamespacesPromise"
+                    placeholder="{{'search.start.rdf.node' | translate}}"
+                    autocompletepromisestatus="getAutocompletePromise"
+                    text-button=""
+                    visual-button=""
+                    visual-callback="fixedVisualCallback(uri, label)"
+                    empty="empty">
+                </search-resource-input>
+            </div>
+        </div>
 
-                            <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>
+        <!-- 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>?edge</code> {{'variable.required.edge' | translate}}</p>
+                    <p>{{'the.sentence.start' | translate}} <code>?node</code> {{'variable.required' | translate}}</p>
 
-                            <p>{{'query.is.optional.local.name' | translate}}</p>
-                        </div>
-                        <div>
-                            <img src="css/images/predicates.png?v=2.5.1" class="info-box-img" height="220" alt="predicates image">
-                        </div>
-                    </div>
+                    <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=2.6.0-RC1" class="info-box-img" height="220"
+                         alt="expand 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.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'extra.properties.shown.node' | translate}}</p>
+            <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=2.6.0-RC1" class="info-box-img" height="220"
+                         alt="labels size image">
+                </div>
+            </div>
 
-                            <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>
+            <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.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>{{'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>?node</code> {{'variable.required.viewed.node' | translate}}</p>
+                    <p>{{'the.sentence.start' | translate}} <code>?edge</code> {{'variable.required.edge' | translate}}
+                    </p>
 
-                            <p>{{'optional.query' | translate}} <em>{{getSampleName(samples[0], 'resourcePropertiesQuery')}}</em> {{'sample.query.used' | translate}}</p>
-                        </div>
-                        <div>
-                            <img src="css/images/side-panel.png?v=2.5.1" class="info-box-img" height="220" alt="side panel image">
-                        </div>
-                    </div>
+                    <p>{{'query.is.optional.local.name' | translate}}</p>
+                </div>
+                <div>
+                    <img src="css/images/predicates.png?v=2.6.0-RC1" 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=2.6.0-RC1" 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="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" data-cy="query-editor">
-                        </query-editor>
+            <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 class="col-md-3">
-                        <p>{{'sample.queries' | translate}} </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' | translate}} </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>
 
-                        <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>
+                <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>
@@ -332,29 +261,32 @@
         </label>
     </div>
     <div class="pull-left">
-        <button href ng-show="page > 1" ng-click="goToPreviousPage()" class="btn btn-lg btn-secondary"
+        <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"
+                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" ng-click="showPreview()" ng-hide="viewMode == 'editor' || (page == 1 && newConfig.startMode != 'query')"
-            uib-popover="{{'preview.results' | translate}}"
-            popover-placement="top"
-            popover-trigger="mouseenter">
+                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" ng-click="showEditor()" ng-show="viewMode == 'editor' && (page != 1 || newConfig.startMode == 'query')"
-            uib-popover="{{'closes.preview' | translate}}"
-            popover-placement="top"
-            popover-trigger="mouseenter">
+        <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" ng-click="revertEditor()" ng-disabled="!queryEditorIsDirty" ng-hide="!revertConfig || viewMode == 'editor' || (page == 1 && newConfig.startMode != 'query')"
+        <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">
@@ -362,10 +294,10 @@
         </button>
     </div>
     <div class="pull-right">
-        <a ng-href="graphs-visualizations/" class="btn btn-lg btn-secondary"
-            uib-popover="{{'closes.config.no.save' | translate}}"
-            popover-placement="top"
-            popover-trigger="mouseenter">
+        <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"