graphdb-workbench 10.0.0-M2-1 → 10.5.1

package/dist/pages/choose-repository-type.html

@@ -1,13 +1,13 @@
-<link href="css/repository.create.css?v=10.0.0-M2-1" rel="stylesheet">
+<link href="css/repository.create.css?v=10.5.1" rel="stylesheet">
 
 <div>
     <h1 class="mb-3">{{pageTitle}}</h1>
     <div class="create-buttons">
         <div class="mr-1 mb-1">
-            <button id="repository-type-gdb-btn" class="btn btn-outline-primary create-repo-btn" ng-click="chooseRepositoryType(repositoryTypes.graphdbRepo)">
+            <button id="repository-type-gdb-btn" class="btn btn-outline-primary btn-lg d-block create-repo-btn" ng-click="chooseRepositoryType(repositoryTypes.graphdbRepo)" guide-selector="createGraphDBRepository">
                 <span class="repository-heading">
-                    <em class="icon-repo-graphdb icon-2-5x"></em>
-                    <span class="h3 repo-type">{{'graphdb.repo' | translate}}</span>
+                    <i class="icon-repo-graphdb icon-3x" aria-hidden="true"></i>
+                    <span class="repo-type">{{'graphdb.repo' | translate}}</span>
                 </span>
                 <small class="text-muted repo-description">{{'graphdb.repo.info' | translate}}</small>
             </button>
@@ -15,8 +15,8 @@
         <div class="mr-1 mb-1">
             <button id="repository-type-ontop-btn" class="btn btn-outline-primary btn-lg d-block create-repo-btn" ng-click="chooseRepositoryType(repositoryTypes.ontop)">
                 <span class="repository-heading">
-                    <i class="icon-repo-ontop icon-2-5x" aria-hidden="true"></i>
-                    <span class="h3 repo-type">{{'ontop.virtual.sparql' | translate}}</span>
+                    <i class="icon-repo-ontop icon-3x" aria-hidden="true"></i>
+                    <span class="repo-type">{{'ontop.virtual.sparql' | translate}}</span>
                 </span>
                 <small class="text-muted repo-description">{{'ontop.repos.translate.data' | translate}}</small>
             </button>
@@ -25,8 +25,8 @@
         <div class="mr-1 mb-1">
             <button id="repository-type-fedx-btn" class="btn btn-outline-primary btn-lg d-block create-repo-btn" ng-click="chooseRepositoryType(repositoryTypes.fedx)">
                 <span class="repository-heading">
-                    <i class="icon-repo-fedx icon-2-5x" aria-hidden="true"></i>
-                    <span class="h3 repo-type">{{'fedex.virtual.sparql' | translate}}</span>
+                    <i class="icon-repo-fedx icon-3x" aria-hidden="true"></i>
+                    <span class="repo-type">{{'fedex.virtual.sparql' | translate}}</span>
                 </span>
                 <small class="text-muted repo-description">{{'fedex.multi.sparql.endpoints' | translate}}</small>
             </button>

package/dist/pages/cluster-management/clusterInfo.html

@@ -1,14 +1,17 @@
-<link href="css/clustermanagement.css?v=10.0.0-M2-1" rel="stylesheet"/>
+<link href="css/clustermanagement.css?v=10.5.1" rel="stylesheet"/>
+<link href="css/rdf-details-side-panel.css?v=10.5.1" rel="stylesheet"/>
+<link href="js/lib/d3-tip/d3-tip.css?v=10.5.1" rel="stylesheet"/>
+
 <title>{{'view.clusterManagement.title' | translate}}</title>
 
 <h1>
     {{title}}
     <span class="btn btn-link"
           ng-class="{ 'help-button': showExternalElements, 'help-button-disabled': !showExternalElements }"
-          popover-template="'js/angular/templates/titlePopoverTemplate.html'"
+          uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
           popover-trigger="mouseenter"
           popover-placement="bottom"
-          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 onto-loader-new
@@ -18,147 +21,166 @@
      size="75">
 </div>
 
-<div class="clearfix mb-2">
-    <button type="button" class="btn btn-primary create-cluster-btn" ng-disabled="clusterConfiguration"
-            ng-click="createCluster()"
-            tooltip="{{'cluster_management.buttons.create_cluster_tooltip' | translate}}" tooltip-placement="bottom">
-        <span class="icon-plus"></span> {{'cluster_management.buttons.create_cluster' | translate}}
-    </button>
-    <button type="button" class="btn btn-secondary delete-cluster-btn"
-            ng-click="showDeleteDialog()"
-            tooltip="{{'cluster_management.buttons.delete_cluster_tooltip' | translate}}" tooltip-placement="bottom"
-            ng-disabled="!clusterConfiguration">
-        <span class="icon-trash"></span> {{'cluster_management.buttons.delete_cluster' | translate}}
-    </button>
+<div class="clearfix mb-2 d-flex" ng-if="!loader && clusterConfiguration">
+    <div class="action-buttons">
+        <div ng-if="isAdmin()" class="buttons-wrapper">
+            <button type="button" class="btn btn-secondary delete-cluster-btn mr-2"
+                    ng-click="showDeleteDialog()"
+                    gdb-tooltip="{{'cluster_management.buttons.delete_cluster_tooltip' | translate}}"
+                    tooltip-placement="bottom">
+                <span class="icon-trash"></span> {{'cluster_management.buttons.delete_cluster' | translate}}
+            </button>
+            <button type="button" class="btn btn-secondary remove-node-btn" ng-if="currentLeader"
+                    ng-click="showRemoveNodesFromClusterDialog()"
+                    gdb-tooltip="{{'cluster_management.buttons.remove_nodes_btn_tooltip' | translate}}" tooltip-placement="bottom">
+                <span class="icon-minus"></span> {{'cluster_management.buttons.remove_nodes_btn' | translate}}
+            </button>
+            <button type="button" class="btn btn-primary add-node-btn" ng-if="currentLeader"
+                    ng-click="showAddNodeToClusterDialog()"
+                    gdb-tooltip="{{'cluster_management.buttons.add_nodes_btn_tooltip' | translate}}" tooltip-placement="bottom">
+                <span class="icon-plus"></span> {{'cluster_management.buttons.add_nodes_btn' | translate}}
+            </button>
+<!--            TODO: removed for GDB10.5 version due to instability of the cluster in the backend -->
+<!--            <button type="button" class="btn btn-primary replace-nodes-btn mr-2" ng-if="currentLeader"-->
+<!--                    ng-click="showReplaceNodesDialog()"-->
+<!--                    gdb-tooltip="{{'cluster_management.buttons.replace_nodes_btn_tooltip' | translate}}" tooltip-placement="bottom">-->
+<!--                <span class="icon-exchange"></span> {{'cluster_management.buttons.replace_nodes_btn' | translate}}-->
+<!--            </button>-->
+        </div>
+    </div>
+    <button class="btn btn-link preview-cluster-config-btn"
+            ng-click="toggleSidePanel()"
+            gdb-tooltip="{{'cluster_management.buttons.show_cluster_settings_tooltip' | translate}}"
+            tooltip-placement="left"><span class="icon-settings settings-icon small"></span></button>
 </div>
 
-<div class="ng-scope" ng-hide="clusterConfiguration">
-    <p class="alert alert-danger">
-        {{'cluster_management.no_cluster_configured' | translate}}
-    </p>
+<div id="nodeTooltip" class="nodetooltip" ng-hide="selectedNode == null">
+    <a href="{{selectedNode.endpoint}}" class="break-word"><strong>{{selectedNode.endpoint}}</strong></a>
+    <hr style="margin-top: 10px; margin-bottom: 10px"/>
+    <div class="row">
+        <div class="col-sm-6">{{'cluster_management.cluster_status.node.rpc_address' | translate}}</div>
+        <div class="col-sm-6 break-word">{{selectedNode.address}}</div>
+    </div>
+    <div class="row">
+        <div class="col-sm-6">{{'cluster_management.cluster_status.node.state' | translate}}</div>
+        <div class="col-sm-6">{{selectedNode.nodeState}}</div>
+    </div>
+    <div class="row">
+        <div class="col-sm-6">{{'cluster_management.cluster_status.node.term' | translate}}</div>
+        <div class="col-sm-6">{{selectedNode.term}}</div>
+    </div>
+    <div class="row">
+        <div class="col-sm-6">{{'cluster_management.cluster_status.node.last_log_term' | translate}}</div>
+        <div class="col-sm-6">{{selectedNode.lastLogTerm}}</div>
+    </div>
+    <div class="row">
+        <div class="col-sm-6">{{'cluster_management.cluster_status.node.last_log_index' | translate}}</div>
+        <div class="col-sm-6">{{selectedNode.lastLogIndex}}</div>
+    </div>
 </div>
 
-<div ng-if="clusterConfiguration" class="row">
-    <div class="col-lg-6">
-        <div class="card cluster-information-card">
-            <div class="card-block">
-                <div class="clearfix">
-                    <h3 class="mb-0">
-                        <span class="collapsible-heading" data-toggle="collapse" data-target="#cluster-status"
-                              aria-expanded="false" aria-controls="cluster-status">
-                            <em class="icon-caret-down text-muted"></em>
-                              {{'cluster_management.cluster_status.label' | translate}}
-                        </span>
-                    </h3>
-                </div>
-                <div class="collapse show in" id="cluster-status">
-                    <div class="mt-1" ng-if="!!leader">
-                        <div class="col-xs-6 mb-1 no-margin-list">
-                            <h4>{{'cluster_management.cluster_status.leader' | translate}}</h4>
-                            <div>{{'cluster_management.cluster_status.node.address' | translate}}</div>
-                            <ul>
-                                <li>
-                                    <div>{{leader.address}}</div>
-                                </li>
-                            </ul>
-                            <div>{{'cluster_management.cluster_status.node.endpoint' | translate}}</div>
-                            <ul>
-                                <li>
-                                    <div>{{leader.endpoint}}</div>
-                                </li>
-                            </ul>
-                            <div>{{'cluster_management.cluster_status.node.state' | translate}}</div>
-                            <ul>
-                                <li>
-                                    <div>{{leader.nodeState}}</div>
-                                </li>
-                            </ul>
-                            <div>{{'cluster_management.cluster_status.node.term' | translate}}</div>
-                            <ul>
-                                <li>
-                                    <div>{{leader.term}}</div>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="col-xs-6 container">
-                            <h4>{{'cluster_management.cluster_status.followers' | translate}}</h4>
-                            <div ng-repeat="node in followers">
-                                {{node.address}} - {{node.syncStatus}}
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-1" ng-if="!leader">
-                        <div class="col-xs-12">
-                            <h4>{{'cluster_management.cluster_status.election.label' | translate}}</h4>
-                            <h5>{{'cluster_management.cluster_status.election.nodes_status' | translate}}</h5>
-                            <ol>
-                                <li ng-repeat="node in followers">
-                                    {{node.address}} - {{node.nodeState}}
-                                </li>
-                            </ol>
-                        </div>
-                    </div>
-                </div>
+<div ng-if="!loader" class="cluster-view">
+    <div cluster-graphical-view></div>
+    <div id="toggle-legend-button" class="toggle-legend-btn">
+        <button class="btn btn-link"
+                ng-click="toggleLegend()"
+                gdb-tooltip="{{'cluster_management.cluster_page.toggle_legend_btn' | translate}}"
+                tooltip-placement="right">
+            <span class="icon-help toggle-legend-icon"></span>
+        </button>
+    </div>
+</div>
+
+<pageslide ng-show="clusterConfiguration"
+           ps-class="rdf-info-side-panel"
+           ps-open="shouldShowClusterSettingsPanel"
+           onopen="onopen"
+           onclose="onclose"
+           ps-side="right"
+           ps-custom-height="calc(100vh - 55px)"
+           ps-size="25vw">
+    <div class="rdf-side-panel-content break-word-alt p-1 pt-2">
+        <button class="close mb-1 ml-1" ng-click="toggleSidePanel()"></button>
+        <h3 class="hovered-parent">
+            {{'cluster_management.cluster_configuration.label' | translate}}
+        </h3>
+        <div class="mb-2" ng-if="isAdmin()">
+            <button type="button" class="btn btn-primary edit-cluster-configuration"
+                    ng-if="currentNode.nodeState === NodeState.LEADER"
+                    ng-click="showEditConfigurationDialog()"
+                    gdb-tooltip="{{'cluster_management.buttons.edit_cluster_tooltip' | translate}}"
+                    tooltip-placement="bottom">
+                <span class="icon-edit mr-1"></span>{{'cluster_management.buttons.edit_cluster' | translate}}
+            </button>
+        </div>
+        <div class="datasource mb-1">
+            <div class="item clearfix break-word-alt small">
+                {{'cluster_management.cluster_configuration_properties.election_min_timeout' | translate}}
+                <em class="icon-info text-primary"
+                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.election_min_timeout_tooltip' | translate}}"></em>
+            </div>
+            <div class="data-value">
+                <span>{{clusterConfiguration.electionMinTimeout | number}}</span>
             </div>
         </div>
-    </div>
-    <div class="col-lg-6">
-        <div class="card cluster-configuration-card">
-            <div class="card-block">
-                <div class="clearfix">
-                    <h3 class="mb-0">
-                        <span class="collapsible-heading" data-toggle="collapse" data-target="#cluster-configuration"
-                              aria-expanded="false" aria-controls="cluster-configuration">
-                            <em class="icon-caret-down text-muted"></em>
-                            {{'cluster_management.cluster_configuration.label' | translate}}
-                        </span>
-                    </h3>
-                </div>
-                <div class="collapse show in" id="cluster-configuration">
-                    <div class="mt-1">
-                        <div class="col-xs-8 mb-1 no-margin-list">
-                            <h4>{{'cluster_management.cluster_configuration.configuration_label' | translate}}</h4>
-                            <!--                            <ul>-->
-                            <div>{{'cluster_management.cluster_configuration_properties.election_min_timeout' | translate}}</div>
-                            <ul>
-                                <li>
-                                    <div>{{clusterConfiguration.electionMinTimeout}}</div>
-                                </li>
-                            </ul>
-                            <div>{{'cluster_management.cluster_configuration_properties.election_range_timeout' | translate}}</div>
-                            <ul>
-                                <li>
-                                    <div>{{clusterConfiguration.electionRangeTimeout}}</div>
-                                </li>
-                            </ul>
-                            <div>{{'cluster_management.cluster_configuration_properties.heartbeat_interval' | translate}}</div>
-                            <ul>
-                                <li>
-                                    <div>{{clusterConfiguration.heartbeatInterval}}</div>
-                                </li>
-                            </ul>
-                            <div>{{'cluster_management.cluster_configuration_properties.message_size_kb' | translate}}</div>
-                            <ul>
-                                <li>
-                                    <div>{{clusterConfiguration.messageSizeKB}}</div>
-                                </li>
-                            </ul>
-                            <div>{{'cluster_management.cluster_configuration_properties.verification_timeout' | translate}}</div>
-                            <ul>
-                                <li>
-                                    <div>{{clusterConfiguration.verificationTimeout}}</div>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="col-xs-4">
-                            <h4>{{'cluster_management.cluster_configuration.nodes_list_label' | translate}}</h4>
-                            <div ng-repeat="node in clusterConfiguration.nodes">
-                                {{node}}
-                            </div>
-                        </div>
-                    </div>
-                </div>
+        <div class="datasource mb-1">
+            <div class="item clearfix break-word-alt small">
+                {{'cluster_management.cluster_configuration_properties.election_range_timeout' | translate}}
+                <em class="icon-info text-primary"
+                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.election_range_timeout_tooltip' | translate}}"></em>
+            </div>
+            <div class="data-value">
+                <span>{{clusterConfiguration.electionRangeTimeout | number}}</span>
+            </div>
+        </div>
+        <div class="datasource mb-1">
+            <div class="item clearfix break-word-alt small">
+                {{'cluster_management.cluster_configuration_properties.heartbeat_interval' | translate}}
+                <em class="icon-info text-primary"
+                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.heartbeat_interval_tooltip' | translate}}"></em>
+            </div>
+            <div class="data-value">
+                <span>{{clusterConfiguration.heartbeatInterval | number}}</span>
+            </div>
+        </div>
+        <div class="datasource mb-1">
+            <div class="item clearfix break-word-alt small">
+                {{'cluster_management.cluster_configuration_properties.message_size_kb' | translate}}
+                <em class="icon-info text-primary"
+                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.message_size_kb_tooltip' | translate}}"></em>
+            </div>
+            <div class="data-value">
+                <span>{{clusterConfiguration.messageSizeKB | number}}</span>
             </div>
         </div>
+        <div class="datasource mb-1">
+            <div class="item clearfix break-word-alt small">
+                {{'cluster_management.cluster_configuration_properties.verification_timeout' | translate}}
+                <em class="icon-info text-primary"
+                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.verification_timeout_tooltip' | translate}}"></em>
+            </div>
+            <div class="data-value">
+                <span>{{clusterConfiguration.verificationTimeout | number}}</span>
+            </div>
+        </div>
+        <div class="datasource mb-1">
+            <div class="item clearfix break-word-alt small">
+                {{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb' | translate}}
+                <em class="icon-info text-primary"
+                    gdb-tooltip="{{'cluster_management.cluster_configuration_properties.transaction_log_maximum_size_gb_tooltip' | translate}}"></em>
+            </div>
+            <div class="data-value">
+                <span>{{clusterConfiguration.transactionLogMaximumSizeGB | number}}</span>
+            </div>
+        </div>
+        <h4>{{'cluster_management.cluster_configuration.nodes_list_label' | translate}}</h4>
+        <ul>
+            <li ng-repeat="node in clusterModel.nodes">
+                <a class="data-value" href="{{node.endpoint}}" target="_blank">{{node.endpoint}}</a>
+                <div class="small">{{ 'cluster_management.cluster_status.node.rpc_address' | translate }}: <span class="data-value">{{node.address}}</span>
+                </div>
+                <div class="small">{{ 'cluster_management.cluster_status.node.state' | translate }}: <span class="data-value">{{node.nodeState}}</span></div>
+            </li>
+        </ul>
     </div>
-</div>
+</pageslide>

package/dist/pages/connectorsInfo.html

@@ -2,10 +2,10 @@
     <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 write ontop fedx license></div>
     <div onto-loader-new
@@ -18,45 +18,46 @@
         <div class="pull-right">
             <button class="btn btn-lg btn-link p-0" type="button"
                     ng-click="getConnectors()"
-                    tooltip="{{'reload.all.connector.info' | translate}}" tooltip-placement="left">
+                    gdb-tooltip="{{'reload.all.connector.info' | translate}}" tooltip-placement="left">
                 <em class="icon-reload"></em>
             </button>
         </div>
         <div create-progress ng-show="beingBuiltConnector.inline && beingBuiltConnector.percentDone > 0"></div>
         <div ng-show="!isActiveRepoFedXType() && connectors.length">
-            <div id="connectorManagement" class="mb-3" ng-repeat="connector in connectors">
+            <div id="connectorManagement" class="mb-3" ng-repeat="connector in connectors"
+                 ng-init="keyForDom = connector.key.replace(' ', '-')">
                 <h3>{{connector.key}}</h3>
                 <section class="mb-1">
-                    <div id="accordion-{{connector.key}}" role="tablist" aria-multiselectable="true">
+                    <div id="accordion-{{keyForDom}}" role="tablist" aria-multiselectable="true">
                         <div class="card" ng-repeat="exist in existing[connector.key]">
-                            <div class="card-header" role="tab" id="heading-{{connector.key}}{{$index}}">
+                            <div class="card-header" role="tab" id="heading-{{keyForDom}}{{$index}}">
 								<div class="pull-right">
 									<button class="btn btn-link p-0" type="button"
-										ng-click="copyConnector(connector, exist)"
-										tooltip="{{'copy.connector' | translate}} {{exist.name}}" tooltip-append-to-body="true">
+										    ng-click="copyConnector(connector, exist)"
+                                            gdb-tooltip="{{'copy.connector' | translate}} {{exist.name}}">
 										<em class="icon-copy"></em>
 									</button>
 									<button class="btn btn-link p-0" type="button"
-										ng-click="repair(exist, connector)"
-										tooltip="{{'repair.connector' | translate}} {{exist.name}}" tooltip-append-to-body="true">
+										    ng-click="repair(exist, connector)"
+                                            gdb-tooltip="{{'repair.connector' | translate}} {{exist.name}}">
 										<em class="icon-reload"></em>
 									</button>
 									<button class="btn btn-link secondary p-0" type="button"
-										ng-click="delete(exist, connector)"
-										tooltip="{{'delete.connector' | translate}} {{exist.name}}" tooltip-append-to-body="true">
+										    ng-click="delete(exist, connector)"
+                                            gdb-tooltip="{{'delete.connector' | translate}} {{exist.name}}">
 										<em class="icon-trash"></em>
                                     </button>
 								</div>
                                 <h5 class="mb-0">
-                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion-{{connector.key}}"
-                                       href="#collapse-{{connector.key}}{{$index}}" aria-expanded="false"
-                                       aria-controls="collapse-{{connector.key}}{{$index}}">
+                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion-{{keyForDom}}"
+                                       href="#collapse-{{keyForDom}}{{$index}}" aria-expanded="false"
+                                       aria-controls="collapse-{{keyForDom}}{{$index}}">
                                         {{exist.name}}
                                     </a>
                                 </h5>
                             </div>
-                            <div id="collapse-{{connector.key}}{{$index}}" class="collapse" role="tabpanel"
-                                 aria-labelledby="heading-{{connector.key}}{{$index}}">
+                            <div id="collapse-{{keyForDom}}{{$index}}" class="collapse" role="tabpanel"
+                                 aria-labelledby="heading-{{keyForDom}}{{$index}}">
                                 <div class="card-block">
                                     <div class="form-horizontal">
                                         <div class="row form-group" ng-repeat="option in getOptions(connector)"
@@ -120,6 +121,10 @@
                                                                     <input type="text" class="form-control"
                                                                            ng-if="child.__type == 'String'"
                                                                            ng-model="field[child.__name]" readonly>
+                                                                    <textarea class="form-control"
+                                                                              ng-if="child.__type == 'BigString'"
+                                                                              ng-model="field[child.__name]" readonly>
+                                                                    </textarea>
                                                                     <div ng-if="child.__type == 'StringArray'"
                                                                          ng-repeat="value in field[child.__name] track by $index">
                                                                         <input type="text" class="form-control"
@@ -127,7 +132,7 @@
                                                                                readonly/>
                                                                     </div>
                                                                     <!-- Handles other types, e.g. OptionArray -->
-                                                                    <div ng-if="child.__type != 'String' && child.__type != 'StringArray'"
+                                                                    <div ng-if="child.__type != 'String' && child.__type != 'StringArray' && child.__type != 'BigString'"
                                                                          class="col-form-label">
                                                                         <label ng-show="!field[child.__name]"><em>{{'no.value.set' | translate}}</em></label>
                                                                         <pre class="form-control" ng-show="field[child.__name]">{{toPrettyJson(field[child.__name])}}</pre>

package/dist/pages/create-index.html

@@ -1,10 +1,10 @@
-<link href="css/lib/angular-xeditable/xeditable.min.css?v=10.0.0-M2-1" rel="stylesheet">
+<link href="css/lib/angular-xeditable/xeditable.min.css?v=10.5.1" rel="stylesheet">
 
-<link href="css/lib/yasqe.min.css?v=10.0.0-M2-1" rel="stylesheet"/>
+<link href="css/lib/yasqe.min.css?v=10.5.1" rel="stylesheet"/>
 
-<link href="css/new-sparql.css?v=10.0.0-M2-1" rel="stylesheet"/>
+<link href="css/new-sparql.css?v=10.5.1" rel="stylesheet"/>
 
-<link href="css/graphs-config.css?v=10.0.0-M2-1" rel="stylesheet"/>
+<link href="css/graphs-config.css?v=10.5.1" rel="stylesheet"/>
 
 
 <div class="container-fluid">
@@ -12,10 +12,10 @@
     <h1>
         {{editSearchQuery ? (viewType === 'text' ? 'edit.search.query':(page === 2 ? 'edit.search.query' : 'edit.analogical.query')) : title | translate}}
         <span ng-hide="editSearchQuery" 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></div>
     <div system-repo-warning></div>
@@ -47,7 +47,7 @@
                 <label for="indexParameters" class="col-md-4 col-form-label">{{'semantic.vectors.index.params' | translate}}</label>
                 <div class="col-md-8">
       <input class="form-control" type="text" ng-model="newIndex.options" id="indexParameters" placeholder="-vectortype binary">
-                    <div class="small text-muted" style="margin-top: 0.5rem">{{'see.full.label' | translate}} <a href="http://graphdb.ontotext.com/documentation/{{info.productShortVersion}}/{{info.productType}}/semantic-similarity-searches.html#create-index-parameters" rel="noopener" target="_blank">{{'list.of.supported.params' | translate}}</a></div>
+                    <div class="small text-muted" style="margin-top: 0.5rem">{{'see.full.label' | translate}} <a href="http://graphdb.ontotext.com/documentation/{{info.productShortVersion}}/semantic-similarity-searches.html#create-index-parameters" rel="noopener" target="_blank">{{'list.of.supported.params' | translate}}</a></div>
                 </div>
             </div>
 
@@ -65,7 +65,7 @@
           </div>
             <div class="checkbox offset-xs-3 offset-md-4" ng-show="viewType == 'text'">
                 <label class="col-xs-6 col-md-6"
-                       tooltip="{{'literal.index.input' | translate}}"
+                       gdb-tooltip="{{'literal.index.input' | translate}}"
                        tooltip-placement="bottom">
                     <input type="checkbox" class="literal-index" ng-true-value="'true'" ng-false-value="'false'" ng-model="newIndex.isLiteralIndex"/>
                     {{'literal.index.label' | translate}}
@@ -74,7 +74,7 @@
             <div class="form-group row" ng-show="viewType == 'predication'">
                 <label class="col-md-4 col-form-label">{{'input.literal.index.label' | translate}}</label>
                 <div class="col-md-8">
-                    <select class="form-control" ng-options="idx for idx in literalIndexes" ng-model="newIndex.inputIndex"/>
+                    <select class="form-control" ng-options="idx for idx in literalIndexes" ng-model="newIndex.inputIndex"></select>
                 </div>
             </div>
         </div>
@@ -86,7 +86,7 @@
         <div class="card-block">
 
             <button type="button" class="btn btn-link pull-right" ng-click="toggleHelp()">
-              <span class="icon-help" popover="{{'toggle.help' | translate}}" popover-placement="top" popover-trigger="mouseenter"></span>
+              <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>
 
@@ -109,7 +109,7 @@
             </ul>
 
             <div>
-                <div class="alert alert-help mb-2" id="query-help" collapse="helpHidden" ng-show="page == 1">
+                <div class="alert alert-help mb-2" id="query-help" uib-collapse="helpHidden" ng-show="page == 1">
                     <button class="close absolute" ng-click="toggleHelp(0)"></button>
                     <p class="lead">
                         {{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'query.determines.data.index' | translate}}
@@ -129,7 +129,7 @@
                     {{'query.execution.info' | translate}}
                 </div>
 
-                <div class="alert alert-help mb-2" id="query-help" collapse="helpHidden" ng-show="page == 2">
+                <div class="alert alert-help mb-2" id="query-help" uib-collapse="helpHidden" ng-show="page == 2">
                     <button class="close absolute" ng-click="toggleHelp(0)"></button>
                     <p class="lead">
                         {{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'query.fetch.on.search' | translate}}
@@ -138,7 +138,7 @@
                     {{'query.execution.on.search' | translate}}
                 </div>
 
-                <div class="alert alert-help mb-2" id="query-help" collapse="helpHidden" ng-show="page == 3">
+                <div class="alert alert-help mb-2" id="query-help" uib-collapse="helpHidden" ng-show="page == 3">
                     <button class="close absolute" ng-click="toggleHelp(0)"></button>
                     <p class="lead">
                         {{'this.sentence.start' | translate}} <span class="small-caps">SELECT</span> {{'query.fetch.analogical.search' | translate}}
@@ -172,19 +172,19 @@
             <div class="clearfix">
                 <div class="pull-right">
                     <a ng-href="similarity" class="btn btn-lg btn-secondary"
-                       popover="{{getCloseBtnMsg()}}"
+                       uib-popover="{{getCloseBtnMsg()}}"
                        popover-placement="top"
                        popover-trigger="mouseenter">
                         {{'common.cancel.btn' | translate}}
                     </a>
                     <button ng-if="!editSearchQuery" class="btn btn-lg btn-primary create-similarity-index-btn" ng-click="createIndex()"
-                            popover="{{'create.index.label' | translate}}"
+                            uib-popover="{{'create.index.label' | translate}}"
                             popover-placement="top"
                             popover-trigger="mouseenter">
                         {{'common.create.btn' | translate}}
                     </button>
                     <button ng-if="editSearchQuery" class="btn btn-lg btn-primary save-query-btn" ng-click="saveSearchQuery()"
-                            popover="{{'core.edit.query' | translate}}"
+                            uib-popover="{{'core.edit.query' | translate}}"
                             popover-placement="top"
                             popover-trigger="mouseenter">
                         {{'common.save.btn' | translate}}
@@ -193,13 +193,13 @@
                 <div class="pull-left">
                   <button ng-if="!editSearchQuery" type="button" class="btn btn-link pull-left" ng-click="viewQuery()">{{'view.index.query' | translate}}</button>
                   <button class="btn btn-link test-query-btn" ng-click="showPreview()" ng-hide="viewMode == 'editor' || page != 1"
-                          popover="{{'preview.results' | translate}}"
+                          uib-popover="{{'preview.results' | translate}}"
                           popover-placement="top"
                           popover-trigger="mouseenter">
                       {{'test.query.btn' | translate}}
                   </button>
                   <button class="btn btn-link" ng-click="showEditor()" ng-show="viewMode == 'editor' && page == 1"
-                          popover="{{'closes.preview' | translate}}"
+                          uib-popover="{{'closes.preview' | translate}}"
                           popover-placement="top"
                           popover-trigger="mouseenter">
                       {{'core.edit.query' | translate}}