graphdb-workbench 2.5.1 → 2.6.0-RC2

package/dist/plugins.js

@@ -405,6 +405,7 @@ PluginRegistry.add('guide.step', [
                         extraContent: options.introExtraContent,
                         url: '/hierarchy',
                         elementSelector: '#classChart #main-group',
+                        class: 'clas-hierarchy-intro-guide-dialog',
                         placement: 'left'
                     }, options)
                 });
@@ -420,6 +421,7 @@ PluginRegistry.add('guide.step', [
                             url: '/hierarchy',
                             placement: 'left',
                             elementSelector: selector,
+                            class: 'class-hierarchy-zoom-content-guide-dialog',
                             onNextClick: (guide, step) => {
                                 GuideUtils.classHierarchyZoom(step.elementSelector);
                                 guide.next();
@@ -435,7 +437,8 @@ PluginRegistry.add('guide.step', [
                                 url: '/hierarchy',
                                 placement: 'left',
                                 beforeShowPromise: GuideUtils.deferredShow(800),
-                                elementSelector: selector
+                                elementSelector: selector,
+                                class: 'class-hierarchy-instances-guide-dialog'
                             }, options)
                         });
                     }
@@ -461,6 +464,8 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.class-hierarchy-instances.content',
                         url: '/hierarchy',
                         elementSelector: clasInstanceSelector,
+                        class: 'class-hierarchy-instance-guide-dialog',
+                        placement: 'top',
                         onNextClick: (guide) => {
                             GuideUtils.classHierarchyFocus(clasInstanceSelector);
                             guide.next();
@@ -480,6 +485,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.class-hierarchy-instances-side-panel.content',
                         url: '/hierarchy',
                         elementSelector: '.rdf-info-side-panel div',
+                        class: 'class-hierarchy-side-panel-info-guide-dialog',
                         canBePaused: false,
                         placement: 'left',
                         beforeShowPromise: GuideUtils.deferredShow(800),
@@ -506,6 +512,7 @@ PluginRegistry.add('guide.step', [
                             url: '/hierarchy',
                             canBePaused: false,
                             elementSelector: GuideUtils.getGuideElementSelector('instance-' + focusInstance.instance),
+                            class: 'class-hierarchy-side-bar-instance-info-guide-dialog',
                             focusInstance: focusInstance.instance,
                             extraContent: focusInstance.message
                         }, options)
@@ -522,6 +529,7 @@ PluginRegistry.add('guide.step', [
                         url: '/hierarchy',
                         canBePaused: false,
                         elementSelector: instanceCountSelector,
+                        class: 'class-hierarchy-side-panel-instances-count-guide-dialog',
                         onNextClick: (guide, step) => {
                             GuideUtils.waitFor(step.elementSelector, 3)
                                 .then(() => $(step.elementSelector).trigger('click'));
@@ -535,7 +543,8 @@ PluginRegistry.add('guide.step', [
                     options: angular.extend({}, {
                         content: 'guide.step_plugin.class-hierarchy-instances-query.content',
                         url: '/sparql',
-                        elementSelector: GuideUtils.getSparqlEditorSelector(),
+                        elementSelector: GuideUtils.CSS_SELECTORS.SPARQL_EDITOR_SELECTOR,
+                        class: 'class-hierarchy-instances-query-guide-dialog',
                         scrollToHandler: GuideUtils.scrollToTop
                     }, options)
                 });
@@ -547,7 +556,8 @@ PluginRegistry.add('guide.step', [
                             'guide.step_plugin.class-hierarchy-instances-results.extraContent' : null,
                         url: '/sparql',
                         placement: 'top',
-                        elementSelector: GuideUtils.getSparqlResultsSelector(),
+                        elementSelector: GuideUtils.CSS_SELECTORS.SPARQL_RESULTS_SELECTOR,
+                        class: 'class-hierarchy-instances-results-guide-dialog',
                         fileName: options.fileName,
                         scrollToHandler: GuideUtils.scrollToTop,
                         onNextClick: (guide) => {
@@ -566,6 +576,7 @@ PluginRegistry.add('guide.step', [
                     url: '/hierarchy',
                     canBePaused: false,
                     elementSelector: closeButtonSelector,
+                    class: 'class-hierarchy-side-panel-close-guide-dialog',
                     placement: 'left',
                     // If we followed the count link we come back here from another view
                     // and the side panel needs time to open
@@ -584,7 +595,7 @@ PluginRegistry.add('guide.step', [
                             GuideUtils.waitFor(instanceCountSelector, 3)
                                 .then(() => {
                                     $(instanceCountSelector).trigger('click');
-                                    GuideUtils.waitFor(GuideUtils.getSparqlResultsSelector(), 3)
+                                    GuideUtils.waitFor(GuideUtils.CSS_SELECTORS.SPARQL_RESULTS_SELECTOR, 3)
                                         .then(() => {
                                             GuideUtils.deferredShow(50)()
                                                 .then(() => resolve())
@@ -627,6 +638,7 @@ PluginRegistry.add('guide.step', [
                     guideBlockName: 'clickable-element',
                     options: angular.extend({}, {
                         content: 'guide.step_plugin.create_repository.create_repository_button.content',
+                        class: 'create-repository-guide-dialog',
                         url: '/repository',
                         elementSelector: GuideUtils.getGuideElementSelector('createRepository'),
                         onNextClick: (guide) => GuideUtils.clickOnGuideElement('createRepository')().then(() => guide.next())
@@ -636,6 +648,7 @@ PluginRegistry.add('guide.step', [
                     guideBlockName: 'clickable-element',
                     options: angular.extend({}, {
                         content: 'guide.step_plugin.create_repository.graph_db_repository.content',
+                        class: 'create-gdb-repository-guide-dialog',
                         url: '/repository/create',
                         elementSelector: GuideUtils.getGuideElementSelector('createGraphDBRepository'),
                         onNextClick: GuideUtils.clickOnGuideElement('createGraphDBRepository')
@@ -644,9 +657,10 @@ PluginRegistry.add('guide.step', [
                     guideBlockName: 'input-element',
                     options: angular.extend({}, {
                         content: 'guide.step_plugin.create_repository.repository_id.content',
+                        class: 'gdb-repository-id-input-guide-dialog',
                         url: '/repository/create/graphdb',
                         elementSelector: repositoryIdInputSelector,
-                        onNextValidate: () => GuideUtils.validateTextInput(repositoryIdInputSelector, repositoryId)
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInput(repositoryIdInputSelector, repositoryId))
                     }, options)
                 }
             ];
@@ -657,6 +671,7 @@ PluginRegistry.add('guide.step', [
                     options: angular.extend({}, {
                         content: 'guide.step_plugin.create_repository.ruleset_dropdown.content',
                         url: '/repository/create/graphdb',
+                        class: 'gdb-repository-ruleset-select-guide-dialog',
                         elementSelector: GuideUtils.getGuideElementSelector('graphDBRepositoryRulesetSelect'),
                         show: () => () => {
                             GuideUtils.validateTextInput(repositoryIdInputSelector, repositoryId);
@@ -670,6 +685,7 @@ PluginRegistry.add('guide.step', [
                 options: angular.extend({}, {
                     content: 'guide.step_plugin.create_repository.save_button.content',
                     url: '/repository/create/graphdb',
+                    class: 'create-repository-button-guide-dialog',
                     elementSelector: GuideUtils.getGuideElementSelector('graphDBRepositoryCrateButton'),
                     show: () => () => {
                         GuideUtils.validateTextInput(repositoryIdInputSelector, repositoryId);
@@ -722,6 +738,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.enable-autocomplete.content',
                         url: '/autocomplete',
                         elementSelector: autocompleteCheckboxSelector,
+                        class: 'enable-autocomplete-checkbox-guide-dialog',
                         // Disable default behavior of service when element is clicked.
                         advanceOn: undefined,
                         show: (guide) => () => {
@@ -755,6 +772,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.enable-autocomplete.status_info.content',
                         url: '/autocomplete',
                         elementSelector: GuideUtils.getGuideElementSelector('autocompleteStatus'),
+                        class: 'autocomplete-status-info-guide-dialog',
                         canBePaused: false
                     }, options)
                 }
@@ -767,7 +785,9 @@ PluginRegistry.add('guide.step', [
     {
         guideBlockName: 'execute-sparql-query',
         getSteps: (options, services) => {
+            const SPARQL_DIRECTIVE_SELECTOR = '#query-editor';
             const GuideUtils = services.GuideUtils;
+            const YasguiComponentDirectiveUtil = services.YasguiComponentDirectiveUtil;
             const toastr = services.toastr;
             const $translate = services.$translate;
             const $interpolate = services.$interpolate;
@@ -802,57 +822,66 @@ PluginRegistry.add('guide.step', [
                 code.innerText = query;
                 options.queryAsHtmlCodeElement = '<div class="shepherd-code">' + code.outerHTML + copy.outerHTML + '</div>';
 
-                const queryEditorSelector = GuideUtils.getSparqlEditorSelector();
                 steps.push({
                     guideBlockName: 'input-element',
                     options: angular.extend({}, {
                         content: 'guide.step_plugin.execute-sparql-query.query-editor.content',
                         url: '/sparql',
-                        elementSelector: queryEditorSelector,
-                        beforeShowPromise: () => new Promise(function (resolve, reject) {
-                            GuideUtils.deferredShow(10)()
-                                .then(() => {
-                                    GuideUtils.waitFor(queryEditorSelector, 3)
-                                        .then(() => resolve())
-                                        .catch((error) => {
-                                            services.toastr.error(services.$translate.instant('guide.unexpected.error.message'));
-                                            reject(error);
-                                        });
+                        elementSelector: GuideUtils.CSS_SELECTORS.SPARQL_EDITOR_SELECTOR,
+                        class: 'yasgui-query-editor-guide-dialog',
+                        beforeShowPromise: () => {
+                            return YasguiComponentDirectiveUtil.getOntotextYasguiElementAsync(SPARQL_DIRECTIVE_SELECTOR)
+                                .then(() => GuideUtils.waitFor(GuideUtils.CSS_SELECTORS.SPARQL_EDITOR_SELECTOR, 3))
+                                .catch((error) => {
+                                    services.toastr.error(services.$translate.instant('guide.unexpected.error.message'));
+                                    throw error;
                                 });
-                        }),
+                        },
                         onNextValidate: () => {
-                            const editorQuery = GuideUtils.removeWhiteSpaces(window.editor.getValue());
-                            const stepQuery = GuideUtils.removeWhiteSpaces(query);
-                            if (editorQuery !== stepQuery) {
-                                if (editorQuery === 'select*where{?s?p?o.}limit100' || overwriteQuery) {
-                                    // The query is the default query OR we previously overwrote it => we can overwrite it
-                                    window.editor.setValue(query);
-                                } else {
-                                    GuideUtils.noNextErrorToast(toastr, $translate, $interpolate,
-                                        'guide.step_plugin.execute-sparql-query.query-not-same.error', options);
-                                    return false;
-                                }
-                            }
-                            overwriteQuery = true;
-                            return true;
+                            return YasguiComponentDirectiveUtil.getOntotextYasguiElementAsync(SPARQL_DIRECTIVE_SELECTOR)
+                                .then((yasgui) => yasgui.getQuery().then((query) => ({yasgui, queryFromEditor: query})))
+                                .then(({yasgui, queryFromEditor}) => {
+                                    const editorQuery = GuideUtils.removeWhiteSpaces(queryFromEditor);
+                                    const stepQuery = GuideUtils.removeWhiteSpaces(query);
+                                    if (editorQuery !== stepQuery) {
+                                        if (editorQuery === 'select*where{?s?p?o.}limit100' || overwriteQuery) {
+                                            // The query is the default query OR we previously overwrote it => we can overwrite it
+                                            yasgui.setQuery(query);
+                                        } else {
+                                            GuideUtils.noNextErrorToast(toastr, $translate, $interpolate,
+                                                'guide.step_plugin.execute-sparql-query.query-not-same.error', options);
+                                            return false;
+                                        }
+                                    }
+                                    overwriteQuery = true;
+                                    return true;
+                                });
                         },
                         initPreviousStep: () => new Promise((resolve, reject) => {
                             if (index === 0) {
-                                window.editor.setValue(defaultQuery);
-                                resolve();
+                                YasguiComponentDirectiveUtil.setQuery(SPARQL_DIRECTIVE_SELECTOR, defaultQuery)
+                                    .then(() => resolve());
                             } else {
                                 const haveToReload = '/sparql' !== $location.url();
-                                GuideUtils.executeSparqlQuery($location, $route, query, haveToReload)
-                                    .then(() => resolve())
-                                    .catch((error) => reject(error));
+
+                                if (haveToReload) {
+                                    $location.url('/sparql');
+                                    $route.reload();
+                                }
+                                GuideUtils.waitFor(GuideUtils.CSS_SELECTORS.SPARQL_EDITOR_SELECTOR)
+                                    .then(() => {
+                                        YasguiComponentDirectiveUtil.executeSparqlQuery("#query-editor", query)
+                                            .then(() => {
+                                                resolve();
+                                            })
+                                            .catch((error) => reject(error));
+                                    });
                             }
                         }),
                         scrollToHandler: GuideUtils.scrollToTop,
                         extraContent: queryDef.queryExtraContent,
                         onScope: (scope) => {
-                            scope.copyQuery = () => {
-                                window.editor.setValue(query);
-                            };
+                            scope.copyQuery = () => YasguiComponentDirectiveUtil.setQuery(SPARQL_DIRECTIVE_SELECTOR, query).then(() => {});
                         }
                     }, options)
                 });
@@ -861,8 +890,13 @@ PluginRegistry.add('guide.step', [
                     options: angular.extend({}, {
                         content: 'guide.step_plugin.execute-sparql-query.run-sparql-query.content',
                         url: '/sparql',
-                        elementSelector: GuideUtils.getGuideElementSelector('runSparqlQuery'),
-                        onNextClick: (guide) => GuideUtils.clickOnGuideElement('runSparqlQuery')().then(() => guide.next()),
+                        elementSelector: GuideUtils.CSS_SELECTORS.SPARQL_RUN_BUTTON_SELECTOR,
+                        class: 'yasgui-run-button-guide-dialog',
+                        onNextClick: (guide) => YasguiComponentDirectiveUtil.getOntotextYasguiElementAsync(SPARQL_DIRECTIVE_SELECTOR)
+                                .then((yasgui) => {
+                                    yasgui.query();
+                                    guide.next();
+                                }),
                         scrollToHandler: GuideUtils.scrollToTop,
                         canBePaused: false,
                         initPreviousStep: (services, stepId) => new Promise((resolve, reject) => {
@@ -874,7 +908,9 @@ PluginRegistry.add('guide.step', [
                                     if (currentStepId === stepId) {
                                         resolve();
                                     } else {
-                                        GuideUtils.clickOnGuideElement('runSparqlQuery')().then(() => resolve()).catch((error) => reject(error));
+                                        YasguiComponentDirectiveUtil.executeSparqlQuery("#query-editor", query)
+                                            .then(() => resolve())
+                                            .catch((error) => reject(error));
                                     }
                                 })
                                 .catch((error) => reject(error));
@@ -887,22 +923,29 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.execute-sparql-query.result-explain.content',
                         url: '/sparql',
                         placement: 'top',
-                        elementSelector: GuideUtils.getSparqlResultsSelector(),
+                        elementSelector: GuideUtils.CSS_SELECTORS.SPARQL_RESULTS_SELECTOR,
+                        class: 'yasgui-query-results-guide-dialog',
                         fileName: options.fileName,
                         scrollToHandler: GuideUtils.scrollToTop,
                         extraContent: queryDef.resultExtraContent,
                         canBePaused: false,
                         initPreviousStep: (services, stepId) => new Promise((resolve, reject) => {
                             if ('/sparql' !== $location.url()) {
-                                GuideUtils.executeSparqlQuery($location, $route, query, true)
-                                    .then(() => resolve())
-                                    .catch((error) => reject(error));
+                                $location.url('/sparql');
+                                $route.reload();
+                                GuideUtils.waitFor(GuideUtils.CSS_SELECTORS.SPARQL_EDITOR_SELECTOR)
+                                    .then(() => {
+                                        YasguiComponentDirectiveUtil.executeSparqlQuery("#query-editor", query)
+                                            .then(() => {
+                                                resolve();
+                                            })
+                                            .catch((error) => reject(error));
+                                    });
                             } else {
                                 const previousStep = services.ShepherdService.getPreviousStepFromHistory(stepId);
                                 previousStep.options.initPreviousStep(services, previousStep.options.id)
                                     .then(() => {
-                                        window.editor.setValue(query);
-                                        resolve();
+                                        YasguiComponentDirectiveUtil.setQuery(SPARQL_DIRECTIVE_SELECTOR, query).then(() => resolve());
                                     })
                                     .catch((error) => reject(error));
                             }
@@ -955,6 +998,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.import_rdf_file.content',
                         url: '/import',
                         elementSelector: GuideUtils.getGuideElementSelector('uploadRdfFileButton'),
+                        class: 'upload-rdf-file-button-guide-dialog',
                         // Disable default behavior of service when element is clicked.
                         advanceOn: undefined,
                         show: (guide) => () => {
@@ -974,9 +1018,9 @@ PluginRegistry.add('guide.step', [
                             if (!$(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile)).length) {
                                 GuideUtils.noNextErrorToast(toastr, $translate, $interpolate,
                                     'guide.step_plugin.import_rdf_file.file-must-be-uploaded', options);
-                                return false;
+                                return Promise.resolve(false);
                             } else {
-                                return true;
+                                return Promise.resolve(true);
                             }
                         }
                     }, options)
@@ -988,6 +1032,7 @@ PluginRegistry.add('guide.step', [
                         elementSelector: GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile),
                         url: '/import',
                         placement: 'left',
+                        class: 'import-file-button-guide-dialog',
                         onNextClick: () => GuideUtils.clickOnGuideElement('import-file-' + options.resourceFile)()
                     }, options)
                 },
@@ -997,6 +1042,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.import_rdf_file.import-settings.import.button.content',
                         elementSelector: importSettingsButtonSelector,
                         placement: 'top',
+                        class: 'import-settings-import-file-button-guide-dialog',
                         onPreviousClick: () => new Promise(function (resolve) {
                             GuideUtils.clickOnGuideElement('import-settings-cancel-button')()
                                 .then(() => resolve());
@@ -1024,6 +1070,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.import_status_info.content',
                         url: '/import',
                         elementSelector: GuideUtils.getGuideElementSelector('import-status-info'),
+                        class: 'import-status-info-guide-dialog',
                         onPreviousClick: () => new Promise(function (resolve) {
                             GuideUtils.clickOnGuideElement('import-file-' + options.resourceFile)()
                                 .then(() => resolve());
@@ -1050,13 +1097,17 @@ PluginRegistry.add('guide.step', [
             let submenuTitle;
             let viewName;
             let helpInfo;
+            let menuDialogClass = '';
+            let submenuDialogClass = '';
 
             switch (options.menu) {
                 case "repositories":
                     menuSelector = 'menu-setup';
                     menuTitle = 'menu.setup.label';
+                    menuDialogClass = 'menu-setup-guide-dialog';
                     submenuSelector = 'sub-menu-repositories';
                     submenuTitle = 'menu.repositories.label';
+                    submenuDialogClass = 'sub-menu-repositories-guide-dialog';
                     viewName = 'menu.repositories.label';
                     helpInfo = 'view.repositories.helpInfo';
 
@@ -1064,6 +1115,7 @@ PluginRegistry.add('guide.step', [
                 case "import":
                     menuSelector = 'menu-import';
                     menuTitle = 'common.import';
+                    menuDialogClass = 'menu-import-guide-dialog';
                     viewName = 'common.import';
                     helpInfo = 'view.import.helpInfo';
 
@@ -1071,8 +1123,10 @@ PluginRegistry.add('guide.step', [
                 case "autocomplete":
                     menuSelector = 'menu-setup';
                     menuTitle = 'menu.setup.label';
+                    menuDialogClass = 'menu-setup-guide-dialog';
                     submenuSelector = 'sub-menu-autocomplete';
                     submenuTitle = 'menu.autocomplete.label';
+                    submenuDialogClass = 'sub-menu-autocomplete-guide-dialog';
                     viewName = 'view.autocomplete.title';
                     helpInfo = 'view.autocomplete.helpInfo';
 
@@ -1080,8 +1134,10 @@ PluginRegistry.add('guide.step', [
                 case "visual-graph":
                     menuSelector = 'menu-explore';
                     menuTitle = 'menu.explore.label';
+                    menuDialogClass = 'menu-explore-guide-dialog';
                     submenuSelector = 'sub-menu-visual-graph';
                     submenuTitle = 'visual.graph.label';
+                    submenuDialogClass = 'sub-menu-visual-graph-guide-dialog';
                     viewName = 'visual.graph.label';
                     helpInfo = 'view.visual.graph.helpInfo';
 
@@ -1089,6 +1145,7 @@ PluginRegistry.add('guide.step', [
                 case "sparql":
                     menuSelector = 'menu-sparql';
                     menuTitle = 'menu.sparql.label';
+                    menuDialogClass = 'menu-sparql-guide-dialog';
                     viewName = 'view.sparql.title';
                     helpInfo = 'view.sparql.helpInfo';
 
@@ -1096,8 +1153,10 @@ PluginRegistry.add('guide.step', [
                 case "class-hierarchy":
                     menuSelector = 'menu-explore';
                     menuTitle = 'menu.explore.label';
+                    menuDialogClass = 'menu-explore-guide-dialog';
                     submenuSelector = 'menu-class-hierarchy';
                     submenuTitle = 'menu.class.hierarchy.label';
+                    submenuDialogClass = 'sub-menu-class-hierarchy-guide-dialog';
                     viewName = 'view.class.hierarchy.title';
                     helpInfo = 'view.class.hierarchy.helpInfo';
 
@@ -1126,6 +1185,7 @@ PluginRegistry.add('guide.step', [
                 options: angular.extend({}, {
                     content: 'guide.step-menu.click-menu',
                     menuLabelKey: menuTitle,
+                    class: menuDialogClass,
                     elementSelector: GuideUtils.getGuideElementSelector(menuSelector),
                     showOn: () => {
                         // If submenu is visible this mean that we have to close menu.
@@ -1160,6 +1220,7 @@ PluginRegistry.add('guide.step', [
                     options: angular.extend({}, {
                         content: 'guide.step-menu.click-menu',
                         menuLabelKey: submenuTitle,
+                        class: submenuDialogClass,
                         elementSelector: GuideUtils.getGuideElementSelector(submenuSelector),
                         placement: 'right',
                         canBePaused: false,
@@ -1211,6 +1272,7 @@ PluginRegistry.add('guide.step', [
                     skipPoint: true,
                     content: 'guide.step_plugin.choose-repository.content',
                     elementSelector: GuideUtils.getGuideElementSelector('repositoriesGroupButton'),
+                    class: 'repositories-group-button-guide-dialog',
                     onNextClick: (guide) => GuideUtils.clickOnGuideElement('repositoriesGroupButton')().then(() => guide.next())
                 }, options)
             }, {
@@ -1220,6 +1282,7 @@ PluginRegistry.add('guide.step', [
                     elementSelector: () => {
                         return getRepositoryElementSelector(services, options);
                     },
+                    class: 'repository-select-button-guide-dialog',
                     advanceOn: undefined,
                     beforeShowPromise: () => new Promise(function (resolve, reject) {
                         services.GuideUtils.waitFor(getRepositoryElementSelector(services, options), 1)
@@ -1286,6 +1349,8 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step-intro.table-graph',
                         scrollToHandler: GuideUtils.scrollToTop,
                         elementSelector: GuideUtils.getSparqlResultsSelectorForIri(options.iri),
+                        class: 'table-graph-instance-guide-dialog',
+                        placement: 'top',
                         onNextClick: (guide, step) => {
                             GuideUtils.waitFor(step.elementSelector, 3)
                                 .then(() => $(step.elementSelector).trigger('click'))
@@ -1312,7 +1377,8 @@ PluginRegistry.add('guide.step', [
                     options: angular.extend({}, {
                         content: 'guide.step_plugin.table-graph-overview',
                         scrollToHandler: GuideUtils.scrollToTop,
-                        elementSelector: GuideUtils.getSparqlResultsSelector() + ' tbody',
+                        elementSelector: GuideUtils.CSS_SELECTORS.SPARQL_RESULTS_ROWS_SELECTOR,
+                        class: 'table-graph-overview-guide-dialog',
                         placement: 'top',
                         initPreviousStep: (services, stepId) => new Promise((resolve, reject) => {
                             const currentStepId = services.ShepherdService.getCurrentStepId();
@@ -1323,7 +1389,7 @@ PluginRegistry.add('guide.step', [
                                 if (url !== decodeURIComponent($location.url())) {
                                     $location.url(url);
                                     $route.reload();
-                                    GuideUtils.waitFor(GuideUtils.getSparqlResultsSelector(' tbody'))
+                                    GuideUtils.waitFor(GuideUtils.CSS_SELECTORS.SPARQL_RESULTS_ROWS_SELECTOR)
                                         .then(() => resolve())
                                         .catch((error) => reject(error));
                                 } else {
@@ -1345,6 +1411,7 @@ PluginRegistry.add('guide.step', [
                                 options: angular.extend({}, {
                                     content: 'guide.step_plugin.table-graph-link',
                                     elementSelector: GuideUtils.getSparqlResultsSelectorForIri(subStep.iri),
+                                    class: 'table-graph-link-guide-dialog',
                                     onNextClick: (guide, step) => {
                                         GuideUtils.waitFor(step.elementSelector, 3)
                                             .then(() => $(step.elementSelector).trigger('click'))
@@ -1367,7 +1434,7 @@ PluginRegistry.add('guide.step', [
                                             // this case is from second link we have to reload
                                             $location.url(linkUrl);
                                             $route.reload();
-                                            GuideUtils.waitFor(GuideUtils.getSparqlResultsSelector(' tbody'))
+                                            GuideUtils.waitFor(GuideUtils.CSS_SELECTORS.SPARQL_RESULTS_ROWS_SELECTOR)
                                                 .then(() => resolve())
                                                 .catch((error) => reject(error));
                                         }
@@ -1381,6 +1448,7 @@ PluginRegistry.add('guide.step', [
                                 options: angular.extend({}, {
                                     content: 'guide.step_plugin.table-graph-role',
                                     elementSelector: GuideUtils.getGuideElementSelector('role-' + subStep.role),
+                                    class: 'visual_graph-role-guide-dialog',
                                     onNextClick: (guide, step) => {
                                         GuideUtils.waitFor(step.elementSelector, 3)
                                             .then(() => $(step.elementSelector).trigger('click'))
@@ -1399,7 +1467,7 @@ PluginRegistry.add('guide.step', [
                                                     url += subStep.role;
                                                     $location.url(url);
                                                     $route.reload();
-                                                    GuideUtils.waitFor(GuideUtils.getSparqlResultsSelector(' tbody'))
+                                                    GuideUtils.waitFor(GuideUtils.CSS_SELECTORS.SPARQL_RESULTS_ROWS_SELECTOR)
                                                         .then(() => resolve())
                                                         .catch((error) => reject(error));
                                                 })
@@ -1417,6 +1485,7 @@ PluginRegistry.add('guide.step', [
                                 options: angular.extend({}, {
                                     content: 'guide.step_plugin.table-graph-visual',
                                     elementSelector: GuideUtils.getGuideElementSelector('explore-visual'),
+                                    class: 'table-graph-visual-button-guide-dialog',
                                     onNextClick: (guide, step) => {
                                         GuideUtils.waitFor(step.elementSelector, 3)
                                             .then(() => $(step.elementSelector).trigger('click'));
@@ -1453,7 +1522,8 @@ PluginRegistry.add('guide.step', [
                             steps.push({
                                 guideBlockName: 'read-only-element',
                                 options: angular.extend({}, {
-                                    elementSelector: GuideUtils.getSparqlResultsSelectorForRow(subStep.row)
+                                    elementSelector: GuideUtils.getSparqlResultsSelectorForRow(subStep.row),
+                                    class: 'visual_graph-row-guide-dialog'
                                 }, angular.extend({}, options, subStep))
                             });
                             break;
@@ -1461,7 +1531,9 @@ PluginRegistry.add('guide.step', [
                             steps.push({
                                 guideBlockName: 'read-only-element',
                                 options: angular.extend({}, {
-                                    elementSelector: GuideUtils.getSparqlResultsSelector() + ' tbody'
+                                    elementSelector: GuideUtils.CSS_SELECTORS.SPARQL_RESULTS_ROWS_SELECTOR,
+                                    class: 'visual_graph-table-guide-dialog',
+                                    placement: 'top'
                                 }, angular.extend({}, options, subStep))
                             });
                             break;
@@ -1505,7 +1577,8 @@ PluginRegistry.add('guide.step', [
                         forceReload: true,
                         url: '/graphs-visualizations',
                         elementSelector: GuideUtils.getGuideElementSelector('graphVisualisationSearchInputNotConfigured', ' input'),
-                        onNextValidate: (step) => GuideUtils.validateTextInput(step.elementSelector, step.easyGraphInputText)
+                        class: 'visual-graph-input-iri-guide-dialog',
+                        onNextValidate: (step) => Promise.resolve(GuideUtils.validateTextInput(step.elementSelector, step.easyGraphInputText))
                     }, options)
                 }, {
                     guideBlockName: 'clickable-element',
@@ -1513,6 +1586,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.visual_graph_show_autocomplete.content',
                         url: '/graphs-visualizations',
                         elementSelector: GuideUtils.getGuideElementSelector(`autocomplete-${options.iri}`),
+                        class: 'visual-graph-show-autocomplete-guide-dialog',
                         onNextClick: (guide, step) => GuideUtils.waitFor(step.elementSelector, 3).then(() => $(step.elementSelector).trigger('click')),
                         canBePaused: false,
                         forceReload: true
@@ -1580,6 +1654,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.visual-graph-expand.content',
                         url: '/graphs-visualizations',
                         canBePaused: false,
+                        class: 'visual-graph-expand-node-guide-dialog',
                         elementSelector,
                         // Disable default behavior of service when element is clicked.
                         advanceOn: undefined,
@@ -1669,6 +1744,7 @@ PluginRegistry.add('guide.step', [
                         title: 'guide.step_plugin.visual-graph-properties.title',
                         content: 'guide.step_plugin.visual-graph-properties.content',
                         url: '/graphs-visualizations',
+                        class: 'visual-graph-show-properties-intro-guide-dialog',
                         elementSelector,
                         canBePaused: false,
                         // Disable default behavior of service when element is clicked.
@@ -1696,6 +1772,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.visual-graph-properties-side-panel.content',
                         url: '/graphs-visualizations',
                         elementSelector: '.rdf-side-panel-content',
+                        class: 'visual-graph-side-panel-content-guide-dialog',
                         canBePaused: false,
                         placement: 'left',
                         beforeShowPromise: GuideUtils.deferredShow(500),
@@ -1726,6 +1803,7 @@ PluginRegistry.add('guide.step', [
                             title: 'guide.step_plugin.visual-graph-properties-focus' + translationIdSuffix + '.title',
                             content: content,
                             url: '/graphs-visualizations',
+                            class: 'visual-graph-properties-focus-guide-dialog',
                             canBePaused: false,
                             placement: 'left',
                             elementSelector: GuideUtils.getGuideElementSelector('graph-visualization-node-info-' + focusProperty.property),
@@ -1745,6 +1823,7 @@ PluginRegistry.add('guide.step', [
                     url: '/graphs-visualizations',
                     canBePaused: false,
                     placement: 'left',
+                    class: 'visual-graph-properties-side-panel-close-guide-dialog',
                     elementSelector: closeButtonSelector,
                     advanceOn: {
                         selector: closeButtonSelector,
@@ -1778,7 +1857,7 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.visual-graph-link-focus.content',
                         url: '/graphs-visualizations',
                         canBePaused: false,
-                        extraPadding: 40,
+                        class: 'visual-graph-link-focus-guide-dialog',
                         elementSelector,
                         show: disableAllNodes,
                         hide: enableAllNodes,
@@ -1802,8 +1881,8 @@ PluginRegistry.add('guide.step', [
                         content: 'guide.step_plugin.visual-graph-node-focus.content',
                         url: '/graphs-visualizations',
                         canBePaused: false,
-                        extraPadding: 10,
                         elementSelector,
+                        class: 'visual-graph-node-focus-guide-dialog',
                         show: disableAllNodes,
                         hide: enableAllNodes,
                         beforeShowPromise: GuideUtils.awaitAlphaDropD3(elementSelector, $rootScope),
@@ -1866,9 +1945,10 @@ const BASIC_STEP = {
     maxWaitTime: 3,
     canBePaused: true,
     onNextClick: undefined,
-    onNextValidate: undefined,
+    onNextValidate: () => Promise.resolve(true),
     onPreviousClick: undefined,
-    skipPoint: false
+    skipPoint: false,
+    class: ''
 };
 
 /**
@@ -2453,6 +2533,32 @@ PluginRegistry.add('main.menu', {
     ]
 });
 
+PluginRegistry.add('route', {
+    'url': '/sparql',
+    'module': 'graphdb.framework.sparql-editor',
+    'path': 'sparql-editor/app',
+    'chunk': 'sparql',
+    'controller': 'SparqlEditorCtrl',
+    'templateUrl': 'pages/sparql-editor.html',
+    'title': 'view.sparql.title',
+    'helpInfo': 'view.sparql.helpInfo',
+    'reloadOnSearch': false
+});
+
+PluginRegistry.add('main.menu', {
+    'items': [
+        {
+            label: 'SPARQL',
+            labelKey: 'menu.sparql.label',
+            href: 'sparql',
+            order: 2,
+            role: 'IS_AUTHENTICATED_FULLY',
+            icon: "icon-sparql",
+            guideSelector: 'menu-sparql'
+        }
+    ]
+});
+
 PluginRegistry.add('route', [
     {
     'url': '/sparql-templates',
@@ -2483,32 +2589,6 @@ PluginRegistry.add('main.menu', {
     ]
 });
 
-PluginRegistry.add('route', {
-    'url': '/sparql',
-    'module': 'graphdb.framework.sparql',
-    'path': 'sparql/app',
-    'chunk': 'sparql',
-    'controller': 'QueryEditorCtrl',
-    'templateUrl': 'pages/sparql.html',
-    'title': 'view.sparql.title',
-    'helpInfo': 'view.sparql.helpInfo',
-    'reloadOnSearch': false,
-});
-
-PluginRegistry.add('main.menu', {
-    'items': [
-        {
-            label: 'SPARQL',
-            labelKey: 'menu.sparql.label',
-            href: 'sparql',
-            order: 2,
-            role: 'IS_AUTHENTICATED_FULLY',
-            icon: "icon-sparql",
-            guideSelector: 'menu-sparql'
-        }
-    ]
-});
-
 PluginRegistry.add('route', [
     {
         'url': '/sysinfo',