graphdb-workbench 2.3.1 → 2.4.0-TR1

package/dist/pages/similarity-indexes.html

@@ -1,4 +1,4 @@
-<link href="css/similarity.css?v=2.3.1" rel='stylesheet' type='text/css'/>
+<link href="css/similarity.css?v=2.4.0-TR1" rel='stylesheet' type='text/css'/>
 
 <div class="container-fluid">
 
@@ -12,7 +12,7 @@
 	</h1>
 	<div core-errors ontop fedx license></div>
 	<div system-repo-warning></div>
-	<div class="alert alert-danger" ng-show="repositoryError">
+	<div class="alert alert-danger" ng-if="repositoryError">
 		<p>{{'not.usable.active.repo.error' | translate}}</p>
 		<p>{{repositoryError}}</p>
 	</div>
@@ -20,70 +20,71 @@
     <inactive-plugin-directive
         plugin-name="{{pluginName}}"
         human-readable-plugin-name="Similarity Plugin"
-        load-saved="pullList()"
+        load-saved="reloadSimilarityIndexes()"
         set-plugin-active="setPluginIsActive(isPluginActive)"
         ng-if="isLicenseValid()">
     </inactive-plugin-directive>
 
-	<div class="card mb-2 existing-indexes" ng-if="isLicenseValid() && getActiveRepository() && pluginIsActive && !isActiveRepoOntopType() && !isActiveRepoFedXType()">
-		<div class="card-block" ng-init="getSimilarityIndexes();">
+	<div class="card mb-2 existing-indexes" ng-if="isLicenseValid() && isGraphDBRepository && pluginIsActive">
+		<div class="card-block">
 			<div class="clearfix">
-				<a ng-href="similarity/index/create" ng-if="canWriteActiveRepo()" class="btn btn-link pull-right">
+				<a ng-href="similarity/index/create" ng-if="canEditRepo" class="btn btn-link pull-right">
 					<span class="icon-plus create-similarity-index"></span> {{'view.create.similarity.index.title' | translate}}
 				</a>
 				<h3 class="mb-0"><span class="collapsible-heading" data-toggle="collapse" data-target="#indexes-table"><em class="icon-caret-down text-muted"></em> {{'existing.indexes' | translate}}</span></h3>
-				<div class="mt-1" ng-if="selected === undefined">{{'select.existing.similarity.index' | translate}}</div>
+				<div class="mt-1" ng-if="selectedSimilarityIndex === undefined">{{'select.existing.similarity.index' | translate}}</div>
 			</div>
 			<div class="no-indexes" ng-if="similarityIndexes.length == 0"><em>{{'no.indexes' | translate}}</em></div>
 
 			<div class="collapse in mt-1" id="indexes-table">
 				<table class="table table-hover mb-0" aria-describedby="Similarity index table">
 					<tbody>
-					<tr ng-repeat="index in similarityIndexes track by index.name"
+					<tr ng-repeat="similarityIndex in similarityIndexes track by similarityIndex.name"
                         class="index-row"
-						ng-class="{'table-info text-secondary':index.name == selected.name}">
+						ng-class="{'table-info text-secondary':similarityIndex.name == selectedSimilarityIndex.name}">
 						<td>
-                            <a class="lead index-name" ng-href="{{(index.status == 'BUILT' || index.status == 'REBUILDING' || index.status == 'OUTDATED') ? '#' : ''}}" ng-click="goToSimilarityIndex(index)">{{index.name}}</a>
+                            <a class="lead index-name" ng-href="{{(similarityIndex.isBuiltStatus() || similarityIndex.isRebuildingStatus() || similarityIndex.isOutdatedStatus()) ? '#' : ''}}" ng-click="goToSimilarityIndex(similarityIndex)">{{similarityIndex.name}}</a>
 						</td>
 						<td>
-							<span class="tag tag-default" ng-show="index.type == 'text'" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'text.type.index' | translate}}</span>
-							<span class="tag tag-default" ng-show="index.type == 'predication'" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'predication.type.index' | translate}}</span>
-							<span class="tag tag-default" ng-show="index.type == 'textLiteral'" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'literal.type.index' | translate}}</span>
+							<span class="tag tag-default" ng-if="similarityIndex.isTextType()" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'text.type.index' | translate}}</span>
+							<span class="tag tag-default" ng-if="similarityIndex.isPredicationType()" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'predication.type.index' | translate}}</span>
+							<span class="tag tag-default" ng-if="similarityIndex.isTextLiteralType()" gdb-tooltip="{{'index.type.tooltip' | translate}}">{{'literal.type.index' | translate}}</span>
 						</td>
 
 						<td class="text-xs-right">
-							<span class="text-muted mr-2" ng-show="index.status == 'OUTDATED'" gdb-tooltip="{{'data.changed.tooltip' | translate}}">{{'outdated.status' | translate}}</span>
-							<span class="text-muted mr-2" ng-show="index.status == 'FAILED'" gdb-tooltip="{{'index.building.failed.tooltip' | translate}}">{{'failed.status' | translate}}</span>
-							<span class="text-muted mr-2" ng-show="index.status == 'INTERRUPTED'" gdb-tooltip="{{'index.building.interrupted.tooltip' | translate}}">{{'interrupted.status' | translate}}</span>
-							<span class="text-muted mr-2" ng-show="index.status == 'OBSOLETE'" gdb-tooltip="{{'index.obsolete.tooltip' | translate}}">{{'obsolete.status' | translate}}</span>
-							<span class="btn btn-link similarity-index-building-loader" ng-show="index.status === 'BUILDING' || index.status === 'REBUILDING' || index.status === 'CREATING'">
+							<span class="text-muted mr-2" ng-if="similarityIndex.isOutdatedStatus()" gdb-tooltip="{{'data.changed.tooltip' | translate}}">{{'outdated.status' | translate}}</span>
+							<span class="text-muted mr-2" ng-if="similarityIndex.isFailedStatus()" gdb-tooltip="{{'index.building.failed.tooltip' | translate}}">{{'failed.status' | translate}}</span>
+							<span class="text-muted mr-2" ng-if="similarityIndex.isInterruptedStatus()" gdb-tooltip="{{'index.building.interrupted.tooltip' | translate}}">{{'interrupted.status' | translate}}</span>
+							<span class="text-muted mr-2" ng-if="similarityIndex.isObsoleteStatus()" gdb-tooltip="{{'index.obsolete.tooltip' | translate}}">{{'obsolete.status' | translate}}</span>
+							<span class="btn btn-link similarity-index-building-loader" ng-if="similarityIndex.isBuildingStatus() || similarityIndex.isRebuildingStatus() || similarityIndex.isCreatingStatus()">
           				        <em class="icon-reload loader"></em>
       				        </span>
 
-							<span class="btn btn-link view-sparql-query-btn" ng-click="viewCreateQuery(index)"
-                                  ng-if="index.selectQuery && (index.type == 'text' || index.type == 'predication' || index.type == 'textLiteral')"
+							<span class="btn btn-link view-sparql-query-btn" ng-click="viewCreateQuery(similarityIndex)"
+                                  ng-if="similarityIndex.selectQuery && (similarityIndex.isTextType() || similarityIndex.isPredicationType() || similarityIndex.isTextLiteralType())"
                                   gdb-tooltip="{{'view.sparql.query.title' | translate}}">
 									<em class="icon-sparql"></em>
 							</span>
                             <span class="actions-bar hovered-item">
 								<a class="btn btn-link edit-query-btn"
-                                   ng-if="canWriteActiveRepo() && index.status != 'BUILDING' && index.status != 'REBUILDING' && index.status != 'CREATING'" href="similarity/index/create?selectQuery={{encodeURIComponent(index.selectQuery)}}&options={{index.options}}&editSearchQuery&name={{index.name}}&infer={{index.infer}}&sameAs={{index.sameAs}}&stopList={{index.stopList}}&type={{index.type}}&analyzer={{index.analyzer}}&searchQuery={{index.searchQuery ? encodeURIComponent(index.searchQuery) : ''}}&analogicalQuery={{index.analogicalQuery ? encodeURIComponent(index.analogicalQuery) : ''}}"
-                                        gdb-tooltip="{{index.type == 'predication' ? 'edit.search.analogical.query.title'
-																			   : 'edit.search.query.title' | translate}}">
+                                   ng-if="canEditRepo && !similarityIndex.isBuildingStatus() && !similarityIndex.isRebuildingStatus() && !similarityIndex.isCreatingStatus()"
+                                   ng-click="editSimilarityIndex(similarityIndex)"
+                                        gdb-tooltip="{{similarityIndex.isPredicationType() ? 'edit.search.analogical.query.title' : 'edit.search.query.title' | translate}}">
 									<em class="icon-edit"></em>
 								</a>
 							</span>
 
-							<a class="btn btn-link clone-index-btn" ng-if="index.selectQuery && (index.type == 'text' || index.type == 'predication' || index.type == 'textLiteral')"
-                               href="similarity/index/create?selectQuery={{encodeURIComponent(index.selectQuery)}}&options={{index.options}}&name={{index.name}}&infer={{index.infer}}&sameAs={{index.sameAs}}&stopList={{index.stopList}}&type={{index.type}}&analyzer={{index.analyzer}}&searchQuery={{index.searchQuery ? encodeURIComponent(index.searchQuery) : ''}}&analogicalQuery={{index.analogicalQuery ? encodeURIComponent(index.analogicalQuery) : ''}}"
+							<a class="btn btn-link clone-index-btn"
+                               ng-if="similarityIndex.selectQuery && (similarityIndex.isTextType() || similarityIndex.isPredicationType() || similarityIndex.isTextLiteralType())"
+                               ng-click="cloneSimilataryIndex(similarityIndex)"
 							   gdb-tooltip="{{'create.index.from.existing.tooltip' | translate}}">
 									<em class="icon-copy"></em>
 							</a>
 
-							<button type="button" ng-if="canWriteActiveRepo() && index.status != 'BUILDING' && index.status != 'REBUILDING' && index.status != 'CREATING' && (index.type == 'text' || index.type == 'predication' || index.type == 'textLiteral')" ng-disabled="!index.selectQuery"
-									ng-click="rebuildIndex(index)" class="btn btn-link reload-index-btn" gdb-tooltip="{{'rebuild.index.tooltip' | translate}}"><span
+							<button type="button" ng-if="canEditRepo && !similarityIndex.isBuildingStatus() && !similarityIndex.isRebuildingStatus() && !similarityIndex.isCreatingStatus() && (similarityIndex.isTextType() || similarityIndex.isPredicationType() || similarityIndex.isTextLiteralType())" ng-disabled="!similarityIndex.selectQuery"
+									ng-click="rebuildIndex(similarityIndex)" class="btn btn-link reload-index-btn" gdb-tooltip="{{'rebuild.index.tooltip' | translate}}"><span
 									class="icon-reload similarity-index-icon-reload"></span></button>
-							<button type="button" ng-if="canWriteActiveRepo() && index.status != 'BUILDING' && index.status != 'REBUILDING' && index.status != 'CREATING'" ng-click="deleteIndex(index)"
+							<button type="button" ng-if="canEditRepo && !similarityIndex.isBuildingStatus() && !similarityIndex.isRebuildingStatus() && !similarityIndex.isCreatingStatus()" ng-click="deleteSimilarityIndex(similarityIndex)"
 									class="btn btn-link delete-index-btn" gdb-tooltip="{{'delete.index.tooltip' | translate}}"><span class="icon-trash"></span>
 							</button>
 						</td>
@@ -96,104 +97,77 @@
 		</div>
 	</div>
 
-	<div class="card mb-2 index-search-panel" ng-hide="selected === undefined || selected.type == 'textLiteral'">
+	<div class="card mb-2 index-search-panel" ng-hide="selectedSimilarityIndex === undefined || selectedSimilarityIndex.isTextLiteralType()">
 		<div class="card-block">
-			<h3 class="selected-index">{{'search.in.index' | translate}} <strong>{{selected.name}}</strong></h3>
+			<h3 class="selected-index">{{'search.in.index' | translate}} <strong>{{selectedSimilarityIndex.name}}</strong></h3>
 
-			<div ng-show="selected.type == 'text'">
+			<div ng-if="selectedSimilarityIndex.isTextType()">
 				<div class="d-inline-block">
 					<strong>{{'similarity.search.type' | translate}} </strong>
 					<div class="btn-group">
 						<div class="dropdown">
 						  <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-						    <span ng-if="searchType == 'searchTerm'">{{'term' | translate}}</span>
-						    <span ng-if="searchType == 'searchDocumentID'">{{'document' | translate}}</span>
+						    <span ng-if="similaritySearchType.isSearchTermType(searchType)">{{'term' | translate}}</span>
+						    <span ng-if="similaritySearchType.isSearchDocumentType(searchType)">{{'document' | translate}}</span>
 						  </button>
 						  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-						    <a class="dropdown-item" ng-click="searchType = 'searchTerm'">{{'term' | translate}}</a>
-						    <a class="dropdown-item" ng-click="searchType = 'searchDocumentID'">{{'document' | translate}}</a>
+						    <a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_TERM)">{{'term' | translate}}</a>
+						    <a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_DOCUMENT)">{{'document' | translate}}</a>
 						  </div>
 						</div>
 					</div>
 
-					<!-- <label class="mr-1">
-						<input type="radio" ng-model="searchType" value="searchTerm">
-						Term
-					</label>
-
-					<label class="mr-1">
-						<input type="radio" ng-model="searchType" value="searchDocumentID">
-						Document
-					</label> -->
-
 				</div>
 				<div class="d-inline-block">
 					<strong>{{'similarity.result.type' | translate}} </strong>
 					<div class="btn-group">
 						<div class="dropdown">
 						  <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-								<span ng-if="resultType == 'termResult'">{{'term' | translate}}</span>
-								<span ng-if="resultType == 'documentResult'">{{'document' | translate}}</span>
+								<span ng-if="similarityResultType.TERM_RESULT === resultType">{{'term' | translate}}</span>
+								<span ng-if="similarityResultType.DOCUMENT_RESULT === resultType">{{'document' | translate}}</span>
 						  </button>
 						  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-						    <a class="dropdown-item" ng-click="resultType = 'termResult'">{{'term' | translate}}</a>
-						    <a class="dropdown-item" ng-click="resultType = 'documentResult'">{{'document' | translate}}</a>
+						    <a class="dropdown-item" ng-click="updateSearchType(similarityResultType.TERM_RESULT)">{{'term' | translate}}</a>
+						    <a class="dropdown-item" ng-click="updateSearchType(similarityResultType.DOCUMENT_RESULT)">{{'document' | translate}}</a>
 						  </div>
 						</div>
 					</div>
-					<!-- <label class="mr-1">
-						<input type="radio" ng-model="resultType" value="termResult">
-						Term
-					</label>
-					<label class="mr-1">
-						<input type="radio" ng-model="resultType" value="documentResult">
-						Document
-					</label> -->
 				</div>
 			</div>
 
-			<div ng-show="selected.type == 'predication'">
+			<div ng-if="selectedSimilarityIndex.isPredicationType()">
 				<strong>{{'similarity.search.type' | translate}} </strong>
 
 				<div class="btn-group">
 					<div class="dropdown">
 						<button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-							<span ng-if="searchType == 'searchEntity'">{{'similar.subject.label' | translate}}</span>
-							<span ng-if="searchType == 'searchEntityPredicate'">{{'object.label' | translate}}</span>
-							<span ng-if="searchType == 'searchAnalogical'">{{'analogical.label' | translate}}</span>
+							<span ng-if="similaritySearchType.isSearchEntityType(searchType)">{{'similar.subject.label' | translate}}</span>
+							<span ng-if="similaritySearchType.isSearchEntityPredicateType(searchType)">{{'object.label' | translate}}</span>
+							<span ng-if="similaritySearchType.isSearchAnalogicalType(searchType)">{{'analogical.label' | translate}}</span>
 						</button>
 						<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-							<a class="dropdown-item" ng-click="searchType = 'searchEntity'">{{'similar.subject.label' | translate}}</a>
-							<a class="dropdown-item" ng-click="searchType = 'searchEntityPredicate'">{{'object.label' | translate}}</a>
-							<a class="dropdown-item" ng-click="searchType = 'searchAnalogical'">{{'analogical.label' | translate}}</a>
+							<a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_ENTITY)">{{'similar.subject.label' | translate}}</a>
+							<a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_ENTITY_PREDICATE)">{{'object.label' | translate}}</a>
+							<a class="dropdown-item" ng-click="updateSearchType(similaritySearchType.SEARCH_ANALOGICAL)">{{'analogical.label' | translate}}</a>
 						</div>
 					</div>
 				</div>
-				<!-- <label class="mr-1">
-					<input type="radio" ng-model="searchType" value="searchEntity">
-					IRI
-				</label>
-				<label class="mr-1">
-					<input type="radio" ng-model="searchType" value="searchEntityPredicate">
-					IRI + predicate
-				</label> -->
-
 			</div>
 
 			<search-resource-input
-					ng-show="searchType != 'searchEntityPredicate' && searchType != 'searchAnalogical'"
+					ng-if="!similaritySearchType.isSearchEntityPredicateType() && !similaritySearchType.isSearchAnalogicalType(searchType)"
 					namespacespromise="getNamespacesPromise"
 					autocompletepromisestatus="getAutocompletePromise"
 					placeholder="{{'search.rdf.resources.for.rdf.entity.placeholder' | translate}}"
 					text-button=""
 					visual-button="Show"
-					visual-callback="performSearch(selected.name, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
+					visual-callback="performSearch(selectedSimilarityIndex, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
 					uri-validation="{{searchType != 'searchTerm'}}"
 					preserve-input="true"
 					empty="empty">
 			</search-resource-input>
 
-			<div class="row" ng-show="searchType == 'searchEntityPredicate'">
+			<div class="row" ng-if="similaritySearchType.isSearchEntityPredicateType(searchType)">
 				<div class="col-md-6 pr-0">
 					<search-resource-input
 							namespacespromise="getNamespacesPromise"
@@ -201,7 +175,7 @@
 							placeholder="{{'search.rdf.for.subject.placeholder' | translate}}"
 							text-button=""
 							visual-button=""
-							visual-callback="psiSubject = uri"
+							visual-callback="setPsiSubject(uri)"
 							uri-validation="true"
 							preserve-input="true"
 							empty="empty">
@@ -216,7 +190,7 @@
 							placeholder="{{'search.rdf.for.predicate.placeholder' | translate}}"
 							text-button=""
 							visual-button="Show"
-							visual-callback="performSearch(selected.name, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
+							visual-callback="performSearch(selectedSimilarityIndex, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
 							uri-validation="true"
 							preserve-input="true"
 							empty="empty">
@@ -224,7 +198,7 @@
 				</div>
 			</div>
 
-			<div class="row" ng-show="searchType == 'searchAnalogical'">
+			<div class="row" ng-if="similaritySearchType.isSearchAnalogicalType(searchType)">
 				<div class="col-md-6 pr-0">
 					<search-resource-input
 							namespacespromise="getNamespacesPromise"
@@ -232,7 +206,7 @@
 							placeholder="{{'search.rdf.for.given.subject.placeholder' | translate}}"
 							text-button=""
 							visual-button=""
-							visual-callback="analogicalSubject = uri"
+							visual-callback="setAnalogicalSubject(uri)"
 							uri-validation="true"
 							preserve-input="true"
 							empty="empty">
@@ -246,7 +220,7 @@
 							placeholder="{{'search.rdf.for.given.object.placeholder' | translate}}"
 							text-button=""
 							visual-button=""
-							visual-callback="analogicalObject = uri"
+							visual-callback="setAnalogicalObject(uri)"
 							uri-validation="true"
 							preserve-input="true"
 							empty="empty">
@@ -254,7 +228,7 @@
 				</div>
 			</div>
 
-			<div class="row" ng-show="searchType == 'searchAnalogical'">
+			<div class="row" ng-if="similaritySearchType.isSearchAnalogicalType(searchType)">
 				<div class="col-md-12 mt-2">
 					<search-resource-input
 							namespacespromise="getNamespacesPromise"
@@ -262,7 +236,7 @@
 							placeholder="{{'search.rdf.for.search.subject.placeholder' | translate}}"
 							text-button=""
 							visual-button="Show"
-							visual-callback="performSearch(selected.name, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
+							visual-callback="performSearch(selectedSimilarityIndex, uri, searchType, resultType, (!searchParameters) ? '' : searchParameters)"
 							uri-validation="true"
 							preserve-input="true"
 							empty="empty">
@@ -270,17 +244,17 @@
 				</div>
 			</div>
 
-			<button ng-show="selected.type == 'text'" class="btn btn-link btn-sm mt-1 px-0 collapsed" data-toggle="collapse" data-target="#search-type">{{'search.options' | translate}} <span class="icon-caret-up"></span></button>
+			<button ng-if="selectedSimilarityIndex.isTextType()" class="btn btn-link btn-sm mt-1 px-0 collapsed" data-toggle="collapse" data-target="#search-type">{{'search.options' | translate}} <span class="icon-caret-up"></span></button>
 
-			<button ng-show="selected.type == 'predication'" class="btn btn-link btn-sm mt-1 px-0 collapsed" data-toggle="collapse" data-target="#search-type-predication">{{'search.options' | translate}} <span class="icon-caret-up"></span></button>
+			<button ng-if="selectedSimilarityIndex.isPredicationType()" class="btn btn-link btn-sm mt-1 px-0 collapsed" data-toggle="collapse" data-target="#search-type-predication">{{'search.options' | translate}} <span class="icon-caret-up"></span></button>
 
-			<div id="search-type" class="mt-1 collapse" ng-show="selected.type == 'text'">
+			<div id="search-type" class="mt-1 collapse" ng-show="selectedSimilarityIndex.isTextType()">
 				<label for="indexParameters" class="col-form-label"><strong>{{'semantic.vectors.search.parameters.label' | translate}}</strong></label>
 				<input class="form-control" type="text" placeholder="-numsearchresults 20 -searchtype minsim ({{'optional.label' | translate}})" ng-model="searchParameters" >
 				<div class="small text-muted" style="margin-top: 0.5rem">{{'see.the.full' | translate}} <a href="http://graphdb.ontotext.com/documentation/{{info.productShortVersion}}/semantic-similarity-searches.html#search-parameters">{{'supported.parameters.list' | translate}}</a></div>
 			</div>
 
-			<div id="search-type-predication" class="mt-1 collapse" ng-show="selected.type == 'predication'">
+			<div id="search-type-predication" class="mt-1 collapse" ng-show="selectedSimilarityIndex.isPredicationType()">
 				<label for="indexParameters" class="col-form-label"><strong>{{'semantic.vectors.search.parameters.label' | translate}}</strong></label>
 				<input class="form-control" type="text" placeholder="-numsearchresults 20 -searchtype minsim ({{'optional.label' | translate}})" ng-model="searchParameters" >
 				<div class="small text-muted" style="margin-top: 0.5rem">{{'see.the.full' | translate}} <a href="http://graphdb.ontotext.com/documentation/{{info.productShortVersion}}/semantic-similarity-searches.html#search-parameters">{{'supported.parameters.list' | translate}}</a></div>
@@ -292,17 +266,17 @@
 
 	<div class="card search-results" ng-show="lastSearch">
 		<div class="card-block">
-				<em ng-show="lastSearch.type != 'searchAnalogical'">{{'results.for.label' | translate}}
-					<a ng-show="lastSearch.type == 'searchDocumentID' || lastSearch.type == 'searchEntity' || lastSearch.type == 'searchEntityPredicate'"
+				<em ng-show="!lastSearch.isSearchAnalogicalType()">{{'results.for.label' | translate}}
+					<a ng-show="lastSearch.isSearchDocumentType() || lastSearch.isSearchEntityType() || lastSearch.isSearchEntityPredicateType()"
 					   title="{{trimIRI(lastSearch.termOrSubject)}}" class="uri" href="resource?uri={{trimIRI(lastSearch.termOrSubject)}}" rel="noopener" target="_blank">{{trimIRI(lastSearch.termOrSubject)}}</a>
 
-					<span ng-show="lastSearch.type == 'searchEntityPredicate'"> + <a title="{{lastSearch.predicate}}" target="_blank"
+					<span ng-show="lastSearch.isSearchEntityPredicateType()"> + <a title="{{lastSearch.predicate}}" target="_blank"
 					   class="uri" href="resource?uri={{lastSearch.predicate}}">{{lastSearch.predicate}}</a> -></span>
 
-					<span ng-show="lastSearch.type == 'searchTerm'">"{{lastSearch.termOrSubject}}"</span>
+					<span ng-show="lastSearch.isSearchTermType()">"{{lastSearch.termOrSubject}}"</span>
 				</em>
 
-				<em ng-show="lastSearch.type == 'searchAnalogical'">
+				<em ng-show="lastSearch.isSearchAnalogicalType()">
 					If <a title="{{analogicalSubject}}" class="uri" href="resource?uri={{analogicalSubject}}" rel="noopener" target="_blank">{{analogicalSubject}}</a>
 
 					-> <a title="{{analogicalObject}}" rel="noopener" target="_blank" class="uri" href="resource?uri={{analogicalObject}}">{{analogicalObject}}</a>
@@ -314,14 +288,8 @@
 			<button type="button" class="btn btn-link" ng-click="viewSearchQuery()">{{'view.sparql.query.title' | translate}}</button>
 
 
-			<div class="yasr-container" ng-show="lastSearch">
-				<div id="yasr">
-					<!--<uib-pagination class="nav navbar-right" ng-show="allResultsCount > pageSize" total-items="allResultsCount" items-per-page="pageSize" ng-model="page" ng-change="changePagination()" direction-links="false" boundary-links="true" max-size="5" rotate="true"></pagination>-->
-					<div class="yasr" id="yasr-inner">
-						<div class='yasr_results'></div>
-					</div>
-				</div>
-
+			<div class="yasr-container pt-1" ng-if="lastSearch">
+                <yasgui-component ng-if="!loading" id="query-editor" yasgui-config="yasguiConfig""></yasgui-component>
 				<div id="results-loader" class="ot-loader opacity-hide" onto-loader size="100"></div>
 			</div>
 		</div>

package/dist/pages/sparql-editor.html

@@ -0,0 +1,15 @@
+<link href="css/sparql-editor.css?v=2.4.0-TR1" rel="stylesheet"/>
+
+<div class="sparql-editor-view">
+    <h1 id="sparql-query-update-title-label">
+        <span>{{title}}</span>
+        <span class="btn btn-link"
+              uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
+              popover-trigger="mouseenter"
+              popover-placement="bottom-right"
+              popover-append-to-body="true"><span class="icon-info"></span></span>
+    </h1>
+
+    <yasgui-component id="query-editor" yasgui-config="yasguiConfig"
+                      after-init="initViewFromUrlParams()"></yasgui-component>
+</div>

package/dist/pages/sparql-template-create.html

@@ -1,21 +1,13 @@
-<link href="css/lib/angular-xeditable/xeditable.min.css?v=2.3.1" rel="stylesheet">
-
-<link href="css/lib/yasqe.min.css?v=2.3.1" rel="stylesheet"/>
-
-<link href="css/new-sparql.css?v=2.3.1" rel="stylesheet"/>
-
-<link href="css/graphs-config.css?v=2.3.1" rel="stylesheet"/>
-
-<link href="css/jdbc.css?v=2.3.1" rel="stylesheet"/>
-
-<div class="container-fluid fit-content-on-mobile">
+<div class="container-fluid fit-content-on-mobile"  ng-if="!queryIsRunning">
     <h1>
         {{title}}
         <span class="btn btn-link"
               uib-popover-template="'js/angular/templates/titlePopoverTemplate.html'"
               popover-trigger="mouseenter"
               popover-placement="bottom-right"
-              popover-append-to-body="true"><span class="icon-info"></span></span>
+              popover-append-to-body="true">
+            <span class="icon-info"></span>
+        </span>
     </h1>
     <div core-errors></div>
     <div system-repo-warning></div>
@@ -25,47 +17,73 @@
         <p>{{repositoryError}}</p>
     </div>
 
-    <div class="card mb-2 sql-table-config">
+    <div class="card mb-2 sparql-template">
         <div class="card-block pt-1">
             <p class="lead">{{'template.iri.header' | translate}}</p>
-            <div class="table-group table-group-lg">
-                <input required class="form-control sparql-template-name" type="text" ng-mousedown="isInvalidTemplateId = false" placeholder="http://exampleuri.com/examplepath ({{'required' | translate}})"
-                       ng-model="currentQuery.templateID" ng-disabled="!currentQuery.isNewTemplate">
-                <div style="margin-top: 5px" ng-if="isInvalidTemplateId" class="idError alert alert-danger"
-                    translate="not.valid.iri"
-                    translate-value-value="{{currentQuery.templateID}}">
+            <div class="container-fluid">
+                <input required
+                       class="form-control sparql-template-id"
+                       type="text"
+                       ng-change="markDirty()"
+                       ng-mousedown="sparqlTemplateInfo.isValidTemplateId = true"
+                       placeholder="http://exampleuri.com/examplepath ({{'required' | translate}})"
+                       ng-model="sparqlTemplateInfo.templateID"
+                       ng-disabled="!sparqlTemplateInfo.isNewTemplate"/>
+                <div ng-if="saveOrUpdateExecuted">
+                    <div ng-if="sparqlTemplateInfo.templateID && !isTemplateIdValid(sparqlTemplateInfo.templateID)"
+                         class="idError alert alert-danger template-id-invalid"
+                         translate="not.valid.iri"
+                         translate-value-value="{{sparqlTemplateInfo.templateID}}">
+                    </div>
+                    <div ng-if="!sparqlTemplateInfo.templateID"
+                         class="idError alert alert-danger template-id-required"
+                         translate="sparql.template.iri.constraint">
+                    </div>
                 </div>
-            </div>
 
-            <div class="container-fluid">
-                <br/>
-                <query-editor nostorage notabs notoolbar-saved notoolbar-copy nostatus nocount norun
-                              notoolbar-inference
-                              notoolbar-same-as callback-on-change="updateDirty">
-                </query-editor>
+                <yasgui-component id="query-editor" class="pt-1" yasgui-config="yasguiConfig" query-changed="markDirty()"></yasgui-component>
+
+                <div ng-if="!sparqlTemplateInfo.isValidQuery"
+                     class="idError alert alert-danger  invalid-query"
+                     translate="sparql.template.query.invalid">
+                </div>
+                <div ng-if="!sparqlTemplateInfo.isValidQueryMode"
+                     class="idError alert alert-danger invalid-query-mode"
+                     translate="sparql.template.query.constraint">
+                </div>
             </div>
         </div>
     </div>
-    <button class="btn btn-lg btn-primary save-query-btn" ng-click="saveTemplate()"
-            uib-popover="{{'save.sparql.template.tooltip' | translate}}"
-            popover-placement="top"
-            popover-trigger="mouseenter"
-            ng-if="canWriteActiveRepo()">
-        {{'common.save.btn' | translate}}
-    </button>
-    <a ng-href="sparql-templates" class="btn btn-lg btn-secondary cancel-query-btn"
-       uib-popover="{{'cancel.sparql.template.creation.tooltip' | translate}}"
-       popover-placement="top"
-       popover-trigger="mouseenter"
-       ng-if="canWriteActiveRepo()">
-        {{'common.cancel.btn' | translate}}
-    </a>
-    <a ng-href="sparql-templates" class="btn btn-lg btn-secondary"
-       uib-popover="{{'cancel.sparql.template.creation.tooltip' | translate}}"
-       popover-placement="top"
-       popover-trigger="mouseenter"
-       ng-if="!canWriteActiveRepo()">
-        {{'common.close' | translate}}
-    </a>
-    <br/><br/><br/>
+    <div class="pull-right">
+        <a ng-href="sparql-templates" class="btn btn-lg btn-secondary cancel-query-btn"
+           uib-popover="{{'cancel.sparql.template.creation.tooltip' | translate}}"
+           popover-placement="top"
+           popover-trigger="mouseenter"
+           ng-if="canEditActiveRepo">
+            {{'common.cancel.btn' | translate}}
+        </a>
+        <button class="btn btn-lg btn-primary save-query-btn" ng-click="saveTemplate()"
+                uib-popover="{{'save.sparql.template.tooltip' | translate}}"
+                popover-placement="top"
+                popover-trigger="mouseenter"
+                ng-if="canEditActiveRepo">
+            {{'common.save.btn' | translate}}
+        </button>
+        <a ng-href="sparql-templates" class="btn btn-lg btn-secondary"
+           uib-popover="{{'cancel.sparql.template.creation.tooltip' | translate}}"
+           popover-placement="top"
+           popover-trigger="mouseenter"
+           ng-if="!canEditActiveRepo">
+            {{'common.close' | translate}}
+        </a>
+    </div>
+</div>
+
+<div onto-loader-new
+     ng-if="queryIsRunning"
+     ng-show="queryIsRunning"
+     class="sparql-loader"
+     size="75"
+     message="loaderMessage"
+     timeout="[1]">
 </div>

package/dist/pages/sparql-templates.html

@@ -18,7 +18,7 @@
     <div class="sparql-templates-list card mb-2" ng-if="isLicenseValid() && pluginIsActive && getActiveRepository() && !isActiveRepoOntopType() && !isActiveRepoFedXType()">
         <div class="card-block" ng-init="getSparqlTemplates();">
             <div class="clearfix">
-                <a ng-href="sparql-template/create" ng-if="canWriteActiveRepo()" class="btn btn-link pull-right">
+                <a ng-href="sparql-template/create" ng-if="canWriteActiveRepo()" class="btn btn-link pull-right create-sparql-template">
                     <span class="icon-plus create-sql-table-configuration"></span> {{'create.new.sparql.template' | translate}}
                 </a>
                 <h3 class="mb-0"><span class="collapsible-heading" data-toggle="collapse"

package/dist/pages/sparql.html

@@ -1,8 +1,8 @@
-<link href="css/lib/angular-xeditable/xeditable.min.css?v=2.3.1" rel="stylesheet">
+<link href="css/lib/angular-xeditable/xeditable.min.css?v=2.4.0-TR1" rel="stylesheet">
 
-<link href="css/lib/yasqe.min.css?v=2.3.1" rel="stylesheet"/>
+<link href="css/lib/yasqe.min.css?v=2.4.0-TR1" rel="stylesheet"/>
 
-<link href="css/new-sparql.css?v=2.3.1" rel="stylesheet"/>
+<link href="css/new-sparql.css?v=2.4.0-TR1" rel="stylesheet"/>
 <div id="wb-sparql">
 
     <div ng-show="getActiveRepositoryNoError()" class="pull-right mt-1">

package/dist/pages/webapi.html

@@ -1,6 +1,6 @@
 
-<link href='css/lib/swagger-ui.min.css?v=2.3.1' rel='stylesheet' type='text/css'/>
-<link href='css/swagger.custom.css?v=2.3.1' rel='stylesheet' type='text/css'/>
+<link href='css/lib/swagger-ui.min.css?v=2.4.0-TR1' rel='stylesheet' type='text/css'/>
+<link href='css/swagger.custom.css?v=2.4.0-TR1' rel='stylesheet' type='text/css'/>
 
 <h1>
 	{{title}}