graphdb-workbench 10.0.0-M2-1 → 10.5.1

package/dist/pages/graphs-visualizations.html

@@ -1,17 +1,17 @@
-<link href="css/graphs-vizualizations.css?v=10.0.0-M2-1" rel="stylesheet"/>
-<link href="css/rdf-details-side-panel.css?v=10.0.0-M2-1" rel="stylesheet"/>
-<link href="css/lib/ng-tags-input/ng-tags-input.min.css?v=10.0.0-M2-1" rel="stylesheet"/>
-<link href="js/lib/d3-tip/d3-tip.css?v=10.0.0-M2-1" rel="stylesheet"/>
+<link href="css/graphs-vizualizations.css?v=10.5.1" rel="stylesheet"/>
+<link href="css/rdf-details-side-panel.css?v=10.5.1" rel="stylesheet"/>
+<link href="css/lib/ng-tags-input/ng-tags-input.min.css?v=10.5.1" rel="stylesheet"/>
+<link href="js/lib/d3-tip/d3-tip.css?v=10.5.1" rel="stylesheet"/>
 
 <div class="container-fluid">
 
     <h1>
         {{title}}
         <span class="btn btn-link"
-              popover-template="'js/angular/templates/titlePopoverTemplate.html'"
+              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>
+              popover-append-to-body="true"><span class="icon-info text-tertiary"></span></span>
     </h1>
     <div core-errors license></div>
     <div system-repo-warning></div>
@@ -23,58 +23,51 @@
 
     <div class="toolbar-holder" ng-show="configLoaded && isLicenseValid() && getActiveRepository() && 'SYSTEM' !== getActiveRepository()">
         <button ng-show="!queryResultsMode && !noGoHome" class="btn btn-link p-0 return-home-btn"
-                tooltip="{{'visual.graph.home.label' | translate}}"
+                gdb-tooltip="{{'visual.graph.home.label' | translate}}"
                 tooltip-placement="bottom"
-                tooltip-trigger="mouseenter"
                 ng-click="goToHome()">
             <em class="icon-arrow-up icon-2x"></em>
         </button>
         <button ng-show="!queryResultsMode && configLoaded.startMode == 'search'" class="btn btn-link p-0"
-                tooltip="{{'search.another.resource.label' | translate}}"
+                gdb-tooltip="{{'search.another.resource.label' | translate}}"
                 tooltip-placement="bottom"
-                tooltip-trigger="mouseenter"
                 ng-disabled="!nodeSelected"
                 ng-click="searchVisible = !searchVisible">
             <em class="icon-search icon-2x"></em>
         </button>
         <button class="btn btn-link p-0"
-                tooltip="{{'visual.graph.rotate.graph.left' | translate}}"
+                gdb-tooltip="{{'visual.graph.rotate.graph.left' | translate}}"
                 tooltip-placement="bottom"
-                tooltip-trigger="mouseenter"
                 ng-disabled="!nodeSelected"
                 ng-click="rotate(true)">
             <em class="icon-rotate-left icon-2x"></em>
         </button>
         <button class="btn btn-link p-0"
-                tooltip="{{'visual.graph.rotate.graph.right' | translate}}"
+                gdb-tooltip="{{'visual.graph.rotate.graph.right' | translate}}"
                 tooltip-placement="bottom"
-                tooltip-trigger="mouseenter"
                 ng-disabled="!nodeSelected"
                 ng-click="rotate(false)">
             <em class="icon-rotate-right icon-2x"></em>
         </button>
         <button class="btn btn-link p-0"
-                tooltip="{{numberOfPinnedNodes > 0 ? 'visual.graph.unpin.nodes' : 'visual.graph.pin.down.nodes' | translate}}"
+                gdb-tooltip="{{numberOfPinnedNodes > 0 ? 'visual.graph.unpin.nodes' : 'visual.graph.pin.down.nodes' | translate}}"
                 ng-class="numberOfPinnedNodes > 0 ? 'active' : ''"
                 tooltip-placement="bottom"
-                tooltip-trigger="mouseenter"
                 ng-disabled="!nodeSelected"
                 ng-click="togglePinAllNodes()">
             <em class="icon-pin icon-2x"></em>
         </button>
         <button class="btn btn-link p-0"
-                tooltip="{{'visual.save.graph.snapshot' | translate}}"
+                gdb-tooltip="{{'visual.save.graph.snapshot' | translate}}"
                 tooltip-placement="bottom"
-                tooltip-trigger="mouseenter"
                 ng-if="isUser() && !embedded"
                 ng-disabled="!nodeSelected"
-                ng-click="saveOrUpdateGraph()">
-            <em class="icon-save icon-2x"></em>
+                ng-click="saveOrUpdateGraph()" data-cy="save-or-update-graph">
+            <em class="icon-save icon-2x" ></em>
         </button>
         <button class="btn btn-link p-0"
-                tooltip="{{'visual.graph.click.configure.view' | translate}}"
+                gdb-tooltip="{{'visual.graph.click.configure.view' | translate}}"
                 tooltip-placement="bottom"
-                tooltip-trigger="mouseenter"
                 ng-if="isUser()"
                 ng-click="showSettings()">
             <em class="icon-settings icon-2x visual-graph-settings-btn"></em>
@@ -88,10 +81,10 @@
             <div class="col-lg-12">
                 <div class="card">
                     <div class="card-block">
-                        <h3>{{configLoaded.name}}</h3>
+                        <h3 class="graph-config-name">{{configLoaded.name}}</h3>
                         <p>{{'visual.search.iri' | translate}}
                             <span ng-if="configLoaded.name != defaultGraphConfig.name">{{'visual.graph.advanced.option' | translate}}</span>
-                            <p ng-if="configLoaded.hint">{{'hint' | translate}} {{configLoaded.hint}}</p>
+                            <p ng-if="configLoaded.hint">{{'hint' | translate}} {{configLoaded.hint}}
                         </p>
                         <search-resource-input class="incontext-search-rdf-resource"
                                 namespacespromise="getNamespacesPromise"
@@ -120,6 +113,7 @@
                                 text-button=""
                                 visual-button="{{'rdfs.comment.show' | translate}}"
                                 visual-callback="easyGraphSearch(uri)"
+                                guide-selector="graphVisualisationSearchInputNotConfigured"
                                 empty="empty">
                         </search-resource-input>
                     </div>
@@ -137,21 +131,21 @@
                             <tr ng-repeat="config in graphConfigs">
                                 <td width="20">
                                     <a href ng-click="goToGraphConfig(config)">
-                                        <img ng-if="config.startMode == 'search'" src="css/images/search.png?v=10.0.0-M2-1" alt="" width="64" popover="{{'visual.config.search.box.starting.point' | translate}}" popover-trigger="mouseenter">
-                                        <img ng-if="config.startMode == 'node'" src="css/images/node.png?v=10.0.0-M2-1" alt="" width="64" popover="{{'visual.config.fixed.resource.starting.point' | translate}}" popover-trigger="mouseenter">
-                                        <img ng-if="config.startMode == 'query'" src="css/images/query.png?v=10.0.0-M2-1" alt="" width="64" popover="{{'visual.config.query.results.starting.point' | translate}}" popover-trigger="mouseenter">
+                                        <img ng-if="config.startMode == 'search'" src="css/images/search.png?v=10.5.1" alt="" width="64" uib-popover="{{'visual.config.search.box.starting.point' | translate}}" popover-trigger="mouseenter">
+                                        <img ng-if="config.startMode == 'node'" src="css/images/node.png?v=10.5.1" alt="" width="64" uib-popover="{{'visual.config.fixed.resource.starting.point' | translate}}" popover-trigger="mouseenter">
+                                        <img ng-if="config.startMode == 'query'" src="css/images/query.png?v=10.5.1" alt="" data-cy="graph-config-starting-point-query-results" width="64" uib-popover="{{'visual.config.query.results.starting.point' | translate}}" popover-trigger="mouseenter">
                                     </a>
                                 </td>
                                 <td>
                                     <h5>
-                                        <a href ng-click="goToGraphConfig(config)" popover={{config.description}} popover-trigger="mouseenter">{{config.name}}</a>
+                                        <a href ng-click="goToGraphConfig(config)" uib-popover={{config.description}} popover-trigger="mouseenter">{{config.name}}</a>
                                     </h5>
                                     <samp class="text-muted small text-overflow d-block" ng-if="config.startMode == 'query'">{{config.startGraphQuery}}</samp>
                                     <samp class="text-muted small text-overflow d-block" ng-if="config.startMode == 'node'">{{config.startIRI}}</samp>
                                 </td>
-                                <td class="text-xs-right" ng-if="isUser() && config.owner === principal().username">
-                                    <a ng-href="graphs-visualizations/config/save/{{config.id}}" class="btn btn-link" tooltip="{{'visual.edit.config' | translate}}"><span class="icon-edit"></span></a>
-                                    <button type="button" ng-click="deleteConfig(config)" class="btn btn-link delete-config" tooltip="{{'visual.delete.config' | translate}}"><span class="icon-trash"></span></button>
+                                <td class="text-xs-right" ng-if="isUser() && config.owner === principal.username">
+                                    <a ng-href="graphs-visualizations/config/save/{{config.id}}" class="btn btn-link" gdb-tooltip="{{'visual.edit.config' | translate}}"><span class="icon-edit"></span></a>
+                                    <button type="button" ng-click="deleteConfig(config)" class="btn btn-link delete-config" gdb-tooltip="{{'visual.delete.config' | translate}}" data-cy="delete-graph-config"><span class="icon-trash"></span></button>
                                 </td>
                             </tr>
                             </tbody>
@@ -163,7 +157,7 @@
                     <div class="card-block">
                         <h3 class="mb-2">{{'visual.saved.graphs' | translate}}</h3>
                         <div ng-show="savedGraphs.length == 0">{{'visual.no.saved.graphs' | translate}}</div>
-                        <table class="table table-hover mb-0" ng-init="refreshSavedGraphs()" aria-describedby="Saved graphs table">
+                        <table class="table table-hover mb-0" ng-init="refreshSavedGraphs()" aria-describedby="Saved graphs table" data-cy="saved-graphs-table">
                             <tbody>
                             <tr ng-repeat="graph in savedGraphs">
                                 <td>
@@ -175,20 +169,20 @@
                                 </td>
                                 <td class="text-xs-right">
                                     <button class="btn btn-link"
-                                            tooltip="{{'visual.get.graph.url' | translate}}" tooltip-trigger="mouseenter"
-                                            ng-click="copyToClipboardSavedGraph(graph)">
+                                            gdb-tooltip="{{'visual.get.graph.url' | translate}}"
+                                            ng-click="copyToClipboardSavedGraph(graph)" data-cy="copy-to-clipboard-saved-graph">
                                         <span class="icon-link"></span>
                                     </button>
                                     <button class="btn btn-link"
-                                            ng-if="isUser() && graph.owner === principal().username"
-                                            tooltip="{{'visual.rename.graph' | translate}}" tooltip-trigger="mouseenter"
-                                            ng-click="renameSavedGraph(graph)">
+                                            ng-if="isUser() && graph.owner === principal.username"
+                                            gdb-tooltip="{{'visual.rename.graph' | translate}}"
+                                            ng-click="renameSavedGraph(graph)" data-cy="rename-saved-graph">
                                         <span class="icon-edit"></span>
                                     </button>
                                     <button class="btn btn-link"
-                                            ng-if="isUser() && graph.owner === principal().username"
-                                            tooltip="{{'visual.delete.graph' | translate}}" tooltip-trigger="mouseenter"
-                                            ng-click="deleteSavedGraph(graph)">
+                                            ng-if="isUser() && graph.owner === principal.username"
+                                            gdb-tooltip="{{'visual.delete.graph' | translate}}"
+                                            ng-click="deleteSavedGraph(graph)" data-cy="delete-saved-graph">
                                         <span class="icon-trash"></span>
                                     </button>
                                 </td>
@@ -217,13 +211,15 @@
         onopen="onopen"
         onclose="onclose"
         ps-side="right"
+        ps-click-outside="false"
         ps-custom-height="calc(100vh - 55px)"
-        ps-size="{{pageslideExpanded ? '80vw' : '25vw'}}">
+        ps-size="80vw"
+        ng-class="{'rdf-info-side-panel-expanded': pageslideExpanded}">
     <div class="rdf-side-panel-content break-word-alt p-1 pt-2">
         <span class="toggle-sidepanel" title="{{'visual.collapse.sidepanel' | translate}}" ng-click="toggleSidePanel()">
             <em ng-class="pageslideExpanded ? 'icon-caret-right' : 'icon-caret-left'"></em>
         </span>
-        <button class="close mb-1 ml-1" ng-click="closeInfoPanel()"></button>
+        <button class="close mb-1 ml-1" ng-click="closeInfoPanel()" guide-selector="close-info-panel"></button>
         <h3 class="hovered-parent" ng-if="showPredicates">
             {{'predicates.label' | translate}}
         </h3>
@@ -243,7 +239,7 @@
 
             <div>
                 <div class="form-group mb-2">
-                    <label tooltip="{{'sidepanel.limit.links.tooltip' | translate}}">{{'sidepanel.maximum.links' | translate}}</label>
+                    <label gdb-tooltip="{{'sidepanel.limit.links.tooltip' | translate}}">{{'sidepanel.maximum.links' | translate}}</label>
                     <div class="form-inline">
                         <button type="button" class="btn btn-link px-0" ng-disabled="settings['linksLimit'] < 1"
                                 ng-click="changeLimit(-1)">
@@ -259,13 +255,13 @@
                         </button>
                         <span style="margin-top: 5px" ng-if="invalidLimit"
                               class="idError alert alert-danger"
-                              tooltip="{{INVALID_LINKS_TOOLTIP}}">
+                              gdb-tooltip="{{INVALID_LINKS_TOOLTIP}}">
                             {{INVALID_LINKS_MSG}}
                         </span>
                     </div>
                 </div>
                 <div class="form-group mb-2" ng-show="shouldShowSettings()">
-                    <label tooltip="{{'sidepanel.preferred.languages.for.node' | translate}}">{{'sidepanel.preferred.languages' | translate}}</label>
+                    <label gdb-tooltip="{{'sidepanel.preferred.languages.for.node' | translate}}">{{'sidepanel.preferred.languages' | translate}}</label>
                     <div class="input-group preferred-languages">
                         <tags-input class="wb-tags-input" ng-model="settings['languagesMap']" min-length="2" add-on-space="true"
                                     add-on-comma="true" placeholder="{{'sidepanel.add.language.tag' | translate}}"></tags-input>
@@ -273,15 +269,15 @@
                 </div>
                 <div class="form-group mb-2">
                     <div class="checkbox">
-                        <label tooltip="{{'sidepanel.include.schema.statements.tooltip' | translate}}">
-                        <input type="checkbox" ng-model="settings['includeSchema']" class="include-schema-statements">
+                        <label gdb-tooltip="{{'sidepanel.include.schema.statements.tooltip' | translate}}">
+                            <input type="checkbox" ng-model="settings['includeSchema']" class="include-schema-statements">
                             {{'sidepanel.include.schema.statements' | translate}}
                         </label>
                     </div>
                 </div>
                 <div class="form-group mb-2">
                     <div class="checkbox">
-                        <label tooltip="{{'sidepanel.include.inferred.statements.tooltip' | translate}}">
+                        <label gdb-tooltip="{{'sidepanel.include.inferred.statements.tooltip' | translate}}">
                             <input type="checkbox" ng-model="settings['includeInferred']" class="include-inferred-statements">
                             {{'sidepanel.include.inferred.statements' | translate}}
                         </label>
@@ -291,7 +287,7 @@
 
 
                 <div class="form-group mb-2">
-                    <div class="checkbox" tooltip="{{shouldDisableSameAs() ? 'core.require.inferred' : '' | translate}}">
+                    <div class="checkbox" gdb-tooltip="{{shouldDisableSameAs() ? 'core.require.inferred' : '' | translate}}">
                         <label style="{{'opacity: ' + (!settings['includeInferred'] ? '0.5' : '1')}}" >
                             <input id="sameAsCheck" type="checkbox" ng-model="settings['sameAsState']"
                                    ng-disabled="shouldDisableSameAs()">
@@ -304,20 +300,19 @@
                 <!-- Enable-Disable owl:sameAs checkbox -->
                 <div class="form-group mb-2">
                     <div class="checkbox">
-                        <label tooltip="{{'sidepanel.show.pred.labels.as.links.titles.tooltip' | translate}}">
+                        <label gdb-tooltip="{{'sidepanel.show.pred.labels.as.links.titles.tooltip' | translate}}">
                             <input type="checkbox" class="show-predicate-labels" ng-model="settings['showLinksText']">
                             {{'sidepanel.show.pred.labels.as.links.titles' | translate}}
                         </label>
                     </div>
                 </div>
 
-                <tabset active="active" ng-show="shouldShowSettings()">
-                    <tab>
-                        <tab-heading class="nav-item"
-                                     tooltip-placement="bottom"
-                                     tooltip-trigger="mouseenter"><span class="nav-link">{{'types.label' | translate}}</span></tab-heading>
+                <uib-tabset active="active" ng-show="shouldShowSettings()">
+                    <uib-tab>
+                        <uib-tab-heading class="nav-item"
+                                     tooltip-placement="bottom"><span class="nav-link">{{'types.label' | translate}}</span></uib-tab-heading>
                         <div class="form-group mb-2 mt-1">
-                            <label tooltip="{{'sidepanel.preferred.types.tooltip' | translate}}">{{'sidepanel.preferred.types' | translate}}</label>
+                            <label gdb-tooltip="{{'sidepanel.preferred.types.tooltip' | translate}}">{{'sidepanel.preferred.types' | translate}}</label>
                             <div>
                                 <tags-input class="preferred-types wb-tags-input" ng-model="settings['preferredTypesMap']" min-length="3" add-on-space="true"
                                             add-on-comma="true" placeholder="{{'sidepanel.add.preferred.type.placeholder' | translate}}"
@@ -327,7 +322,7 @@
                         </div>
                         <div class="form-group mb-2">
                             <div class="checkbox">
-                                <label tooltip="{{'sidepanel.show.preferred.types.nodes.only.tooltip' | translate}}">
+                                <label gdb-tooltip="{{'sidepanel.show.preferred.types.nodes.only.tooltip' | translate}}">
                                     <input type="checkbox" class="show-preferred-types-only" ng-model="settings['preferredTypesOnly']">
                                     {{'sidepanel.show.preferred.types.nodes.only' | translate}}
                                 </label>
@@ -335,7 +330,7 @@
                         </div>
 
                         <div class="form-group">
-                            <label tooltip="{{'sidepanel.ignored.types.tooltip' | translate}}">{{'sidepanel.ignored.types' | translate}}</label>
+                            <label gdb-tooltip="{{'sidepanel.ignored.types.tooltip' | translate}}">{{'sidepanel.ignored.types' | translate}}</label>
                             <div>
                                 <tags-input class="ignored-types wb-tags-input" ng-model="settings['rejectedTypesMap']" min-length="3" add-on-space="true"
                                             add-on-comma="true" placeholder="{{'sidepanel.add.ignored.type.placeholder' | translate}}"
@@ -343,14 +338,13 @@
                                             on-tag-added="addedTag($tag)"></tags-input>
                             </div>
                         </div>
-                    </tab>
-                    <tab>
-                        <tab-heading class="nav-item"
-                                     tooltip-placement="bottom"
-                                     tooltip-trigger="mouseenter"><span class="nav-link predicates-tab">{{'predicates.label' | translate}}</span></tab-heading>
+                    </uib-tab>
+                    <uib-tab>
+                        <uib-tab-heading class="nav-item"
+                                     tooltip-placement="bottom"><span class="nav-link predicates-tab">{{'predicates.label' | translate}}</span></uib-tab-heading>
                         <div class="form-group mb-2 mt-1">
                             <div>
-                                <label tooltip="{{'sidepanel.preferred.predicates.tooltip' | translate}}">{{'sidepanel.preferred.predicates' | translate}}</label>
+                                <label gdb-tooltip="{{'sidepanel.preferred.predicates.tooltip' | translate}}">{{'sidepanel.preferred.predicates' | translate}}</label>
 
                                 <tags-input class="preferred-predicates wb-tags-input" ng-model="settings['preferredPredicatesMap']" min-length="3"
                                             add-on-space="true"
@@ -361,15 +355,15 @@
                         </div>
                         <div class="form-group mb-2">
                             <div class="checkbox">
-                                <label tooltip="{{'sidepanel.show.preferred.predicates.links.only.tooltip' | translate}}">
+                                <label gdb-tooltip="{{'sidepanel.show.preferred.predicates.links.only.tooltip' | translate}}">
                                     <input type="checkbox" class="show-preferred-predicates-only" ng-model="settings['preferredPredicatesOnly']">
-                                    {{'sidepanel.show.preferred.predicates' | translate}}
+                                    {{'sidepanel.show.preferred.predicates.only' | translate}}
                                 </label>
                             </div>
                         </div>
 
                         <div class="form-group ">
-                            <label tooltip="{{'sidepanel.ignored.predicates.tooltip' | translate}}">{{'sidepanel.ignored.predicates' | translate}}</label>
+                            <label gdb-tooltip="{{'sidepanel.ignored.predicates.tooltip' | translate}}">{{'sidepanel.ignored.predicates' | translate}}</label>
                             <div>
                                 <tags-input class="ignored-predicates wb-tags-input" ng-model="settings['rejectedPredicatesMap']" min-length="3"
                                             add-on-space="true"
@@ -380,17 +374,17 @@
                                             tag-class="getTagClass($tag.text)"></tags-input>
                             </div>
                         </div>
-                    </tab>
-                </tabset>
+                    </uib-tab>
+                </uib-tabset>
 
-                <div class="mt-1">
-                    <button type="button" class="btn btn-secondary btn-lg reset-settings" ng-click="resetSettings()">{{'common.reset' | translate}}</button>
-                    <button type="submit" class="btn btn-primary btn-lg save-settings-btn" ng-click="updateSettings()">{{'common.save.btn' | translate}}</button>
+                <div class="mt-1 text-right">
+                    <button type="button" class="btn btn-secondary reset-settings" ng-click="resetSettings()">{{'common.reset' | translate}}</button>
+                    <button type="submit" class="btn btn-primary save-settings-btn" ng-click="updateSettings()">{{'common.save.btn' | translate}}</button>
                 </div>
 
                 <script type="text/ng-template" id="ignored-predicates-template">
                     <div class="tag-template">
-                        <div tooltip="{{$getDisplayText().endsWith('*') ? 'sidepanel.wildcard.iris' : '' | translate}}">
+                        <div gdb-tooltip="{{$getDisplayText().endsWith('*') ? 'sidepanel.wildcard.iris' : '' | translate}}">
                             <span>{{$getDisplayText()}}</span>
                             <a class="remove-button" ng-click="$removeTag()">&#xD7;</a>
                         </div>
@@ -419,9 +413,8 @@
 
             <div class="media mb-1">
                 <div class="media-left"
-                     tooltip="{{'labels.label' | translate}}"
-                     tooltip-placement="top"
-                     tooltip-trigger="mouseenter">
+                     gdb-tooltip="{{'labels.label' | translate}}"
+                     tooltip-placement="top">
                     <em class="icon-tag icon-lg" aria-hidden="true"></em>
                 </div>
                 <div class="media-body">
@@ -432,7 +425,7 @@
                 </div>
             </div>
 
-            <div class="break-word-alt">
+            <div class="break-word-alt" guide-selector="graph-visualization-node-info-types">
                 <strong>{{'types.label' | translate}}: </strong><em class="text-muted" ng-if="!nodeTypes.length">No types</em><br>
                 <ul class="list-inline">
                     <li class="list-inline-item" ng-repeat="nodeType in nodeTypes"
@@ -469,7 +462,7 @@
 
                 <div ng-switch-default ui-scroll-viewport class="rdf-list">
                     <div ui-scroll='item in datasource' adapter="adapterContainer.adapter"
-                         class="datasource mb-1">
+                         class="datasource mb-1" guide-selector="graph-visualization-node-info-{{item.key}}">
                         <div class="item clearfix break-word-alt small">{{item.key}}</div>
                         <div class="data-value">
                             <a ng-if="item.value[0].t === 'i'" href="#" ng-click="openIRI(item.value[0].v, $event)" ng-bind="item.value[0].v"></a>

package/dist/pages/guides.html

@@ -0,0 +1,60 @@
+<link href="css/guides.css?v=10.5.1" rel="stylesheet">
+<h1>
+    {{title}}
+    <span class="btn btn-link"
+          uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
+          popover-trigger="mouseenter"
+          popover-placement="bottom"
+          popover-append-to-body="true"><span class="icon-info text-tertiary"></span></span>
+</h1>
+
+<div ng-show="displayedGuides.length > 0" class="clearfix">
+    <div class="btn-group pull-right namespaces-per-page-menu" uib-dropdown>
+        <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" uib-dropdown-toggle ng-disabled="disabled">
+            <span>{{pageSize}}</span>
+        </button>
+        <ul class="dropdown-menu small">
+            <li ng-repeat="size in pageSizeOptions" ng-if="size < guides.length">
+                <span class="dropdown-item page-size-option" ng-click="changePageSize(size)">{{size}}</span>
+            </li>
+            <li>
+                <span class="dropdown-item page-size-option" ng-click="changePageSize(guides.length)">{{'all.label' | translate}}</span>
+            </li>
+        </ul>
+    </div>
+    <span class="pull-right mr-1">{{'view.guides.guides.per.page.label' | translate}}</span>
+</div>
+<div ng-show="displayedGuides.length > 0">
+    <div paginations class="ot-guides-pagination pull-right ot-owlim-ctrl"></div>
+    <span class="showing-info-namespaces pull-right">{{'showing.label' | translate}} {{(pageSize * (page - 1)) + 1}} - {{pageSize * page >= displayedGuides.length ? displayedGuides.length + (pageSize * (page - 1)) : pageSize * page}} of {{guides.length}}</span>
+</div>
+
+<table ng-show="displayedGuides.length > 0" id="guides-table" class="table table-striped table-hover" aria-describedby="Guides table">
+    <thead>
+    <tr>
+        <th id="name" style="width: 80%">{{'view.guides.table.column.name' | translate}}</th>
+        <th id="level" style="width: 10%">{{'view.guides.table.column.level' | translate}}</th>
+        <th id="actionsColumn" style="width: 10%">{{'view.guides.table.column.action' | translate}}</th>
+    </tr>
+    </thead>
+    <tr ng-repeat="guide in displayedGuides | orderBy: ['guideLevel', 'order']" loader-post-repeat-directive>
+        <td>
+            <div class="lead" uib-popover="{{guide.translatedGuideDescription}}" popover-placement="top" popover-trigger="mouseenter">
+                <div>{{guide.translatedGuideName}}</div>
+                <div class=" text-overflow text-overflow-by-vw text-muted small" ng-if="guide.translatedGuideDescription">{{guide.translatedGuideDescription}}</div>
+            </div>
+        </td>
+        <td>
+            {{ guide.guideLevelLabel | translate }}
+        </td>
+        <td>
+            <button class="btn btn-link" ng-click="startGuide(guide)"
+                    gdb-tooltip="{{'view.guides.action.start' | translate}}"><span class="icon-play"></span></button>
+        </td>
+    </tr>
+    <tbody>
+    </tbody>
+</table>
+<div ng-show="guides.length > 0" class="ot-owlim-ctrl clearfix namespaces-pagination">
+    <div paginations class="ot-guides-pagination pull-right"></div>
+</div>

package/dist/pages/home.html

@@ -1,10 +1,13 @@
 <div class="ot-loader ot-loader-home" onto-loader-fancy size="100" ng-show="isLoadingLocation()"></div>
 <div class="content-wrapper" ng-hide="isLoadingLocation()" ng-cloak>
+    <div class="row mt-2" ng-if="!tutorialState">
+        <a href="#" class="btn btn-link float-xs-right" ng-click="showTutorial()">{{'show.welcome.panel' | translate}}</a>
+    </div>
     <div class="row mb-3 tutorial-container" ng-init="initTutorial()" ng-if="tutorialState">
         <div class="col-lg-12">
             <div class="card mt-2">
                 <div class="card-block">
-                    <button type="button" tooltip="{{'common.close' | translate}}" class="close" aria-label="Close"
+                    <button type="button" gdb-tooltip="{{'common.close' | translate}}" class="close" aria-label="Close"
                             ng-click="declineTutorial()"></button>
                     <div class="pages-wrapper">
                         <div class="page-slide" ng-repeat="page in tutorialInfo track by $index">
@@ -14,8 +17,8 @@
                     </div>
                 </div>
                 <div class="card-block">
-                    <a href="#" class="btn btn-lg btn-primary" ng-click="slideNext()">{{'ok.continue' | translate}}</a>
-                    <a href="#" class="btn btn-lg btn-outline-secondary decline-tutorial" ng-click="declineTutorial()">{{'no.thanks' | translate}}</a>
+                    <a href="#" class="btn btn-lg btn-outline-secondary decline-tutorial" ng-click="declineTutorial()">{{'hide.panel' | translate}}</a>
+                    <a href="guides" class="btn btn-lg btn-primary">{{'take.me.to.guides' | translate}}</a>
                     <div class="btn-toolbar pull-right" role="toolbar" aria-label="Toolbar with button groups">
                         <div class="btn-group" role="group" aria-label="First group">
                             <button type="button" class="btn btn-secondary" ng-click="slideToPage($index)"
@@ -29,7 +32,7 @@
     </div>
     <div class="row mb-3" ng-if="getActiveRepository() && !isLoadingLocation() && hasActiveLocation()" ng-cloak>
         <div class="col-lg-12 home-rdf-resource-search">
-            <h3><span  tooltip="{{'view.rdf.data.text.visual.graph.header' | translate}}" tooltip-placement="right">{{'view.resource.label' | translate}}</span></h3>
+            <h3 id="view-resource-label-home"><span  gdb-tooltip="{{'view.rdf.data.text.visual.graph.header' | translate}}" tooltip-placement="right">{{'view.resource.label' | translate}}</span></h3>
             <div class="card">
                 <div class="card-block" ng-keydown="onKeyDown($event)">
                     <search-resource-input
@@ -52,33 +55,35 @@
 
     <div class="mb-2 row" ng-show="!isLoadingLocation() && hasActiveLocation() && getActiveRepository()">
         <div class="col-lg-6">
-            <h3><span tooltip="{{'view.active.repo.info.label' | translate}}" tooltip-placement="top">{{'active.repo.label' | translate}}</span></h3>
+            <h3 id="active-repo-label-home"><span gdb-tooltip="{{'view.active.repo.info.label' | translate}}" tooltip-placement="top">{{'active.repo.label' | translate}}</span></h3>
             <div class="card active-repo-card"
-                 ng-show="canReadRepo(getActiveLocation(), getActiveRepository())">
+                 ng-show="canReadRepo(getActiveRepositoryObject())">
                 <div class="card-block">
-                    <h6>{{getActiveLocation().label}}</h6>
+                    <h6>{{getActiveRepositoryObject().location ? getActiveRepositoryObject().location : 'Local'}}</h6>
                     <div class="actions-bar pull-right">
-                        <button type="button" tooltip="{{'copy.repo.url' | translate}}" class="btn btn-link"
+                        <button type="button" gdb-tooltip="{{'copy.repo.url' | translate}}" class="btn btn-link"
                                 ng-click="copyToClipboard(getActiveRepositoryObject().externalUrl)"><span class="icon-link"></span>
                         </button>
-                        <button type="button" ng-click="goToEditRepo(getActiveRepository())" class="btn btn-link" tooltip="{{'repoTooltips.editRepository' | translate}}"
-                           ng-if="canManageRepositories() && getActiveRepositoryObject().type !== 'system'">
+                        <button type="button" ng-click="goToEditRepo(getActiveRepositoryObject())" class="btn btn-link" gdb-tooltip="{{'repoTooltips.editRepository' | translate}}"
+                                ng-if="canManageRepositories() && getActiveRepositoryObject().type !== 'system'">
                             <span class="icon-edit"></span>
                         </button>
                         <span ng-show="getDegradedReason()">
                             <em class="icon-warning icon-lg text-warning"
-                               tooltip="{{getDegradedReason()}} {{'not.supported.repo.edit.label' | translate}}"
-                               tooltip-placement="top" tooltip-trigger="mouseenter"></em>
+                                gdb-tooltip="{{getDegradedReason()}} {{'not.supported.repo.edit.label' | translate}}"
+                                tooltip-placement="top"></em>
                         </span>
-                        <button type="button" tooltip="{{'refresh.repo.info' | translate}}" class="btn btn-link"
+                        <button type="button" gdb-tooltip="{{'refresh.repo.info' | translate}}" class="btn btn-link"
                                 ng-if="activeRepositorySize && !activeRepositorySizeError"
                                 ng-click="getActiveRepositorySize()"><span class="icon-reload"></span>
                         </button>
                     </div>
-                    <h3 class="card-title ellipsis-block">
+                    <h3 class="card-title ellipsis-block repo-info-home">
                         <em class="icon-2x" ng-class="'icon-repo-' + getActiveRepositoryObject().type"
-                           tooltip="{{toHumanReadableType(getActiveRepositoryObject().type)}} {{'repository.with.label' | translate}} {{canWriteActiveRepo() ? 'read.write' : 'read.only' | translate}} {{'access' | translate}}"></em>
-                        {{getActiveRepository()}}<small ng-show="getActiveRepositoryObject().title"><span class="small"> &middot; {{getActiveRepositoryObject().title}}</span></small>
+                            gdb-tooltip="{{toHumanReadableType(getActiveRepositoryObject().type)}} {{'repository.with.label' | translate}} {{canWriteActiveRepo() ? 'read.write' : 'read.only' | translate}} {{'access' | translate}}"></em>
+                        <div>
+                            {{getActiveRepository()}}<small ng-show="getActiveRepositoryObject().title"><span class="small"> &middot; {{getActiveRepositoryObject().title}}</span></small>
+                        </div>
                     </h3>
                     <div ng-if="activeRepositorySize && !activeRepositorySizeError">
                         <div class="container-fluid">
@@ -127,14 +132,14 @@
             </div>
         </div>
         <div class="col-lg-6">
-            <h3><span tooltip="{{'saved.sparql.queries.tooltip' | translate}}" tooltip-placement="top">{{'saved.sparql.queries.label' | translate}}</span></h3>
+            <h3 id="saved-queries-label-home"><span gdb-tooltip="{{'saved.sparql.queries.tooltip' | translate}}" tooltip-placement="top">{{'saved.sparql.queries.label' | translate}}</span></h3>
             <div class="card"
                  ng-cloak>
                 <div>
                     <ul class="list-group limit-height clearfix {{sampleQueries.length <= 4 ? 'one-column' : 'two-columns'}} saved-queries" ng-show="sampleQueries">
-                        <li ng-repeat="query in sampleQueries" ng-hide="isIgnoreSharedQueries() && query.owner != null" class="list-group-item list-group-item-action">
+                        <li ng-repeat="query in sampleQueries" ng-hide="isIgnoreSharedQueries && query.owner != null" class="list-group-item list-group-item-action">
                             <span class="help-label execute-saved-query" ng-click="goToSparqlEditor(query)">{{'common.execute' | translate}} <span class="icon-caret-right"></span></span>
-                            <samp class="h5">{{query.name}}</samp>
+                            <samp class="query-name">{{query.name}}</samp>
                             <samp class="text-muted small">{{query.body}}</samp>
                         </li>
                     </ul>
@@ -147,11 +152,11 @@
 
     <div class="row mb-3">
         <div class="col-lg-12">
-            <h3><span tooltip="{{'menu.license.tooltip' | translate}}" tooltip-placement="right">{{'menu.license.label' | translate}}</span></h3>
+            <h3 id="license-label-home"><span gdb-tooltip="{{'menu.license.tooltip' | translate}}" tooltip-placement="right">{{'menu.license.label' | translate}}</span></h3>
             <div class="card">
                 <h4 class="card-header">GraphDB {{getProductTypeHuman()}} {{'edition' | translate}}</h4>
                 <!-- appears only when there is a problem with the license -->
-                <div class="alert alert-warning" role="alert" ng-hide="getLicense().valid">
+                <div class="alert alert-danger" role="alert" ng-hide="getLicense().valid">
                     <p>
                         <strong>{{getLicense().message}}</strong><br>
                         {{'supply.license.or.contact.us.warning' | translate}}
@@ -165,22 +170,35 @@
                     </div>
                 </div>
                 <div class="card-block" ng-show="hasActiveLocation()">
-                    <div class="" ng-show="getLicense().product">
-                        <div class="d-inline-block mr-2 mb-1">
+                    <div class="row" ng-show="getLicense().product">
+                        <div class="float-xs-left d-inline-block ml-1 mr-2 mb-1">
                             {{'licensed.to' | translate}}
                             <span class="data-value big">{{getLicense().licensee}}</span>
                         </div>
-                        <div class="d-inline-block mr-2 mb-1">
+                        <div class="float-xs-left d-inline-block ml-1 mr-2 mb-1">
                             {{'valid.until' | translate}}
-                            <span class="data-value big">{{getLicense().expiryDate ? (getLicense().expiryDate | date : 'yyyy-MM-dd') : 'perpetual' | translate}}</span>
+                            <span class="data-value big">{{getLicense().expiryDate ? (getLicense().expiryDate | date: 'yyyy-MM-dd') : 'perpetual' | translate}}</span>
                         </div>
-                        <div class="d-inline-block mr-2 mb-1">
+                        <div class="float-xs-left d-inline-block ml-1 mr-2 mb-1">
                             {{'cores.number' | translate}}
                             <span class="data-value big">{{getLicense().maxCpuCores ? getLicense().maxCpuCores : 'unlimited' | translate}}</span>
                         </div>
-                        <div class="d-inline-block mb-1">
+                        <div class="float-xs-left d-inline-block ml-1 mr-2 mb-1">
                             {{'maintenance.date' | translate}}
-                            <span class="data-value big">{{getLicense().latestPublicationDate ? (getLicense().latestPublicationDate | date : 'yyyy-MM-dd') : 'perpetual' | translate}}</span>
+                            <span class="data-value big">{{getLicense().latestPublicationDate ? (getLicense().latestPublicationDate | date: 'yyyy-MM-dd') : 'perpetual' | translate}}</span>
+                        </div>
+                        <div class="float-xs-left d-inline-block ml-1 mb-1">
+                            {{'capabilities' | translate}}
+                            <div class="data-value big">
+                                <div ng-if="getLicense().licenseCapabilities.length !== 0">
+                                    <div ng-repeat="capability in getLicense().licenseCapabilities">
+                                        <div>{{capability}}</div>
+                                    </div>
+                                </div>
+                                <div ng-if="getLicense().licenseCapabilities.length === 0">
+                                    <div>{{'none' | translate}}</div>
+                                </div>
+                            </div>
                         </div>
                     </div>