graphdb-workbench 2.8.4 → 3.0.0-NEW-JENKINS-1

package/dist/plugins.js

@@ -7,7 +7,8 @@ PluginRegistry.add('route', {
     'templateUrl': 'pages/aclmanagement.html',
     'title': 'view.aclmanagement.title',
     'helpInfo': 'view.aclmanagement.helpInfo',
-    'documentationUrl': 'managing-fgac-workbench.html'
+    'documentationUrl': 'managing-fgac-workbench.html',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -42,7 +43,8 @@ PluginRegistry.add('route', {
     'templateUrl': 'pages/autocomplete.html',
     'title': 'view.autocomplete.title',
     'helpInfo': 'view.autocomplete.helpInfo',
-    'documentationUrl': 'autocomplete-index.html'
+    'documentationUrl': 'autocomplete-index.html',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -72,7 +74,8 @@ PluginRegistry.add('main.menu', {
             href: 'monitor/backup-and-restore',
             order: 2,
             parent: 'Monitor',
-            guideSelector: 'sub-menu-backup-and-restore'
+            guideSelector: 'sub-menu-backup-and-restore',
+            role: 'ROLE_REPO_MANAGER'
         }
     ]
 });
@@ -112,7 +115,8 @@ PluginRegistry.add('route', [
         'path': 'explore/app',
         'controller': 'ExploreCtrl',
         'templateUrl': 'pages/explore.html',
-        'title': 'view.resource.title'
+        'title': 'view.resource.title',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/resource/edit',
         'module': 'graphdb.framework.explore',
@@ -120,7 +124,8 @@ PluginRegistry.add('route', [
         'path': 'explore/app',
         'controller': 'EditResourceCtrl',
         'templateUrl': 'pages/edit.html',
-        'title': 'view.resource.title'
+        'title': 'view.resource.title',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/resource/:any*',
         'module': 'graphdb.framework.explore',
@@ -128,7 +133,8 @@ PluginRegistry.add('route', [
         'path': 'explore/app',
         'controller': 'ExploreCtrl',
         'templateUrl': 'pages/explore.html',
-        'title': 'view.resource.title'
+        'title': 'view.resource.title',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }
 ]);
 
@@ -153,7 +159,8 @@ PluginRegistry.add('route', {
     'templateUrl': 'pages/export.html',
     'title': 'menu.graphs.overview.label',
     'helpInfo': 'view.export.ctr.helpInfo ',
-    'documentationUrl': 'working-with-workbench.html#wbmenu-graphs-overview'
+    'documentationUrl': 'working-with-workbench.html#wbmenu-graphs-overview',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -188,7 +195,8 @@ PluginRegistry.add('route', {
     'templateUrl': 'pages/connectorsInfo.html',
     'title': 'view.connector.management.title',
     'helpInfo': 'view.connector.management.helpInfo',
-    'documentationUrl': 'connectors.html'
+    'documentationUrl': 'connectors.html',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -225,7 +233,8 @@ PluginRegistry.add('route', [
         'title': 'view.class.hierarchy.title',
         'reloadOnSearch': false,
         'helpInfo': 'view.class.hierarchy.helpInfo',
-        'documentationUrl': 'explore-data-and-class-relationships.html#class-hierarchy'
+        'documentationUrl': 'explore-data-and-class-relationships.html#class-hierarchy',
+        'allowAuthorities': ['READ_REPO_{repoId}']
 
     }, {
         'url': '/domain-range-graph',
@@ -235,7 +244,8 @@ PluginRegistry.add('route', [
         'controller': 'DomainRangeGraphCtlr',
         'templateUrl': 'pages/domainRangeInfo.html',
         'title': 'view.domain.range.graph.title',
-        'helpInfo': 'view.domain.range.graph.helpInfo'
+        'helpInfo': 'view.domain.range.graph.helpInfo',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/relationships',
         'module': 'graphdb.framework.graphexplore',
@@ -245,7 +255,8 @@ PluginRegistry.add('route', [
         'templateUrl': 'pages/dependencies.html',
         'title': 'view.class.relationships.title',
         'helpInfo': 'view.class.relationships.helpInfo',
-        'documentationUrl': 'explore-data-and-class-relationships.html#class-relationships'
+        'documentationUrl': 'explore-data-and-class-relationships.html#class-relationships',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/graphs-visualizations',
         'module': 'graphdb.framework.graphexplore',
@@ -256,7 +267,8 @@ PluginRegistry.add('route', [
         'title': 'visual.graph.label',
         'reloadOnSearch': false,
         'helpInfo': 'view.visual.graph.helpInfo',
-        'documentationUrl': 'visualize-and-explore.html#explore-resources-through-the-easy-graph'
+        'documentationUrl': 'visualize-and-explore.html#explore-resources-through-the-easy-graph',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/graphs-visualizations/config/save/:configName?',
         'module': 'graphdb.framework.graphexplore',
@@ -265,7 +277,8 @@ PluginRegistry.add('route', [
         'controller': 'GraphConfigCtrl',
         'templateUrl': 'pages/graph-config/saveGraphConfig.html',
         'title': 'view.create.visual.graph.title',
-        'helpInfo': 'view.create.visual.graph.helpInfo'
+        'helpInfo': 'view.create.visual.graph.helpInfo',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }
 ]);
 
@@ -308,6 +321,73 @@ PluginRegistry.add('main.menu', {
     ]
 });
 
+PluginRegistry.add('route', [
+    {
+        'url': '/graphql/endpoints',
+        'templateUrl': 'js/angular/graphql/templates/graphql-endpoint-management.html',
+        'module': 'graphdb.framework.graphql',
+        'path': 'graphql/app',
+        'controller': 'GraphqlEndpointManagementViewCtrl',
+        'title': 'menu.graphql-endpoint-management.label',
+        'helpInfo': 'graphql.endpoints_management.helpInfo',
+        'documentationUrl': 'graphql-endpoint-management.html'
+    },
+    {
+        'url': '/graphql/endpoint/create',
+        'templateUrl': 'js/angular/graphql/templates/create-graphql-endpoint.html',
+        'module': 'graphdb.framework.graphql',
+        'path': 'graphql/app',
+        'controller': 'CreateGraphqlEndpointViewCtrl',
+        'title': 'menu.create-graphql-endpoint.label',
+        'helpInfo': 'graphql.create_endpoint.helpInfo',
+        'documentationUrl': 'create-graphql-endpoint.html'
+    },
+    {
+        'url': '/graphql/playground',
+        'templateUrl': 'js/angular/graphql/templates/graphql-playground.html',
+        'module': 'graphdb.framework.graphql',
+        'path': 'graphql/app',
+        'controller': 'GraphqlPlaygroundViewCtrl',
+        'title': 'menu.graphql-playground.label',
+        'helpInfo': 'graphql.playground.helpInfo',
+        'documentationUrl': 'graphql-playground.html'
+    }
+]);
+
+PluginRegistry.add('main.menu', {
+    'items': [
+        {
+            label: 'GraphQL',
+            labelKey: 'menu.graphql.label',
+            href: '#',
+            order: 2.5,
+            role: 'IS_AUTHENTICATED_FULLY',
+            icon: "fa-kit fa-gdb-graphql"
+        },
+        {
+            label: 'Endpoint Management',
+            labelKey: 'menu.graphql-endpoint-management.label',
+            href: 'graphql/endpoints',
+            order: 10,
+            role: 'ROLE_REPO_MANAGER',
+            parent: 'GraphQL',
+            children: [
+                {
+                    href: 'graphql/endpoint/create',
+                    children: []
+                }
+            ]
+        },
+        {
+            label: 'GraphQL Playground',
+            labelKey: 'menu.graphql-playground.label',
+            href: 'graphql/playground',
+            order: 15,
+            role: 'IS_AUTHENTICATED_FULLY',
+            parent: 'GraphQL'
+        }]
+});
+
 PluginRegistry.add('route', [
     {
         url: '/guides',
@@ -330,7 +410,7 @@ PluginRegistry.add('main.menu', {
             parent: 'Help',
             icon: 'paste',
             href: 'guides',
-            role: 'ROLE_USER',
+            role: 'ROLE_REPO_MANAGER',
             guideSelector: 'sub-menu-guide'
         }
     ]
@@ -610,7 +690,6 @@ PluginRegistry.add('guide.step', [
                         url: '/repository',
                         elementSelector: GuideUtils.getGuideElementSelector('createRepository'),
                         onNextClick: (guide) => GuideUtils.clickOnGuideElement('createRepository')().then(() => guide.next())
-
                     }, options)
                 }, {
                     guideBlockName: 'clickable-element',
@@ -643,11 +722,24 @@ PluginRegistry.add('guide.step', [
                         elementSelector: GuideUtils.getGuideElementSelector('graphDBRepositoryRulesetSelect'),
                         show: () => () => {
                             GuideUtils.validateTextInput(repositoryIdInputSelector, repositoryId);
-                        },
-                        rulesetName: options.rulesetName
+                        }
                     }, options)
                 });
             }
+            if(options.fts) {
+                steps.push({
+                               guideBlockName: 'clickable-element',
+                               options: angular.extend({}, {
+                                   content: 'guide.step_plugin.create_repository.enable-fts.content',
+                                   url: '/repository/create/graphdb',
+                                   class: 'gdb-repository-enable-fts-guide-dialog',
+                                   extraContent: 'guide.step_plugin.create_repository.enable-fts.extra-content',
+                                   extraContentClass: 'alert alert-help text-left',
+                                   elementSelector: GuideUtils.getGuideElementSelector('enable-fts-search'),
+                                   onNextValidate: () => Promise.resolve(GuideUtils.isChecked(GuideUtils.getGuideElementSelector('enable-fts-search', 'input')))
+                               }, options)
+                           });
+            }
             steps.push({
                 guideBlockName: 'clickable-element',
                 options: angular.extend({}, {
@@ -667,6 +759,78 @@ PluginRegistry.add('guide.step', [
     }
 ]);
 
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'create-similarity-index',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'create-similarity-index';
+
+            return [
+                {
+                    guideBlockName: 'click-main-menu',
+                    options: angular.extend({}, {
+                        menu: 'similarity',
+                        showIntro: true
+                    }, options)
+                }, {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-similarity-index.create-similarity-index',
+                        class: 'similarity-index-guide-dialog',
+                        url: '/similarity',
+                        elementSelector: GuideUtils.getGuideElementSelector('create-similarity-index'),
+                        onNextClick: () => {
+                        }
+                    }, options)
+                }, {
+                    guideBlockName: 'input-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-similarity-index.input-index-name',
+                        class: 'similarity-index-name-input-guide-dialog',
+                        url: '/similarity/index/create',
+                        elementSelector: GuideUtils.getGuideElementSelector('similarity-index-name'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInputNotEmpty(GuideUtils.getGuideElementSelector('similarity-index-name')))
+                    }, options)
+                }, {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-similarity-index.create-index',
+                        class: 'create-similarity-index-guide-dialog',
+                        url: '/similarity/index/create',
+                        elementSelector: GuideUtils.getGuideElementSelector('create-similarity-index-btn'),
+                        onNextClick: () => {
+                        }
+                    }, options)
+                }, {
+                    // check if error block is shown and go back 2 steps or proceed
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        beforeShowPromise: (guide, currentStep) => GuideUtils.getOrWaitFor(GuideUtils.getGuideElementSelector('error'), 1)
+                            .then(() => {
+                                const stepId = currentStep.id;
+                                // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                setTimeout(() => guide.show(stepId - 2))
+                            })
+                            .catch(() => {
+                                // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                setTimeout(() => guide.next())
+                            }),
+                    }, options)
+                },
+                {
+                    guideBlockName: 'hold-and-wait-until-shown',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-similarity-index.wait',
+                        class: 'wait-for-index-guide-dialog',
+                        elementSelectorToWait: GuideUtils.getGuideElementSelector('similarity-indexes-table'),
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
 PluginRegistry.add('guide.step', [
     {
         guideBlockName: 'download-guide-resource',
@@ -957,10 +1121,10 @@ PluginRegistry.add('guide.step', [
 
                                     // Check for duplicated name, if import button for guide rdf data exist.
                                     if (GuideUtils.isVisible(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))) {
-                                        GuideUtils.getOrWaiteFor('.confirm-duplicate-files-dialog')
+                                        GuideUtils.getOrWaitFor('.confirm-duplicate-files-dialog')
                                             .then(() => guide.next());
                                     } else {
-                                        GuideUtils.getOrWaiteFor(importSettingsButtonSelector)
+                                        GuideUtils.getOrWaitFor(importSettingsButtonSelector)
                                             .then(() => guide.next());
                                     }
                                 } else {
@@ -975,7 +1139,7 @@ PluginRegistry.add('guide.step', [
                             }
                         },
                         onNextValidate: () => {
-                            return Promise.allSettled([GuideUtils.getOrWaiteFor('.confirm-duplicate-files-dialog'), GuideUtils.getOrWaiteFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))])
+                            return Promise.allSettled([GuideUtils.getOrWaitFor('.confirm-duplicate-files-dialog'), GuideUtils.getOrWaiteFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))])
                                 .then(([confirmDialogPromise, importButtonPromise]) => {
                                     // There are two ways to exit this step: if the duplication dialog is opened or if the import button for the guide file is displayed.
                                     // The first scenario indicates that the user is trying to upload the same file,
@@ -988,7 +1152,7 @@ PluginRegistry.add('guide.step', [
                                 });
                         },
                         onNextClick: (guide) => {
-                            GuideUtils.getOrWaiteFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))
+                            GuideUtils.getOrWaitFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile))
                                 .then((element) => {
                                     // if we have file import button for the guide rdf file, this indicates that we go through this step for second time.
                                     // This can happen if user start guide for second time.
@@ -1036,7 +1200,7 @@ PluginRegistry.add('guide.step', [
                                 .then(() => resolve());
                         }),
                         beforeShowPromise: () => services.GuideUtils.deferredShow(300)()
-                            .then(() => GuideUtils.getOrWaiteFor(importSettingsButtonSelector, 3)
+                            .then(() => GuideUtils.getOrWaitFor(importSettingsButtonSelector, 3)
                                     .catch((error) => {
                                         services.toastr.error(services.$translate.instant('guide.unexpected.error.message'));
                                         return Promise.reject(error);
@@ -1059,7 +1223,7 @@ PluginRegistry.add('guide.step', [
                             }
                             return GuideUtils.waitFor('.import-resource-message', 10);
                         },
-                        onPreviousClick: () => GuideUtils.getOrWaiteFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile), 10)
+                        onPreviousClick: () => GuideUtils.getOrWaitFor(GuideUtils.getGuideElementSelector('import-file-' + options.resourceFile), 10)
                                 .then((element) => { element.click() })
                     }, options)
                 }
@@ -1146,6 +1310,27 @@ PluginRegistry.add('guide.step', [
                     viewName = 'view.class.hierarchy.title';
                     helpInfo = 'view.class.hierarchy.helpInfo';
 
+                    break;
+                case "ttyg":
+                    menuSelector = 'menu-lab';
+                    menuTitle = 'menu.lab.label';
+                    menuDialogClass = 'menu-lab-guide-dialog';
+                    submenuSelector = 'sub-menu-ttyg';
+                    submenuTitle = 'menu.ttyg.label';
+                    submenuDialogClass = 'sub-menu-ttyg-guide-dialog';
+                    viewName = 'menu.ttyg.label';
+                    helpInfo = 'ttyg.helpInfo';
+
+                    break;
+                case "similarity":
+                    menuSelector = 'menu-explore';
+                    menuTitle = 'menu.explore.label';
+                    menuDialogClass = 'menu-explore-guide-dialog';
+                    submenuSelector = 'sub-menu-similarity';
+                    submenuTitle = 'menu.similarity.label';
+                    submenuDialogClass = 'sub-menu-similarity-guide-dialog';
+                    viewName = 'menu.similarity.label';
+                    helpInfo = 'guide.step-help-info.create-similarity-index';
                     break;
             }
 
@@ -1508,98 +1693,929 @@ PluginRegistry.add('guide.step', [
     }
 ]);
 
-const disableAllNodes = () => () => {
-    $('.node-wrapper').addClass('disable-visual-graph-node');
-};
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'ask-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'ask-ttyg-agent';
+            options.maxWaitTime = 10;
+            options.forceReload = false;
 
-const enableAllNodes = () => () => {
-    $('.node-wrapper').removeClass('disable-visual-graph-node');
-};
+            const explain = options.explain;
+            const explainMore = options.explainMore;
+            const exploreSparql = options.exploreSparql;
+
+            const steps = [
+                {
+                    guideBlockName: 'input-element',
+                    options: angular.extend({}, {
+                        skipPoint: true,
+                        content: `guide.step_plugin.ask-ttyg-agent.input-question`,
+                        class: 'input-question-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('question-input'),
+                        show: (guide) => () => {
+                            const elementSelector = GuideUtils.getGuideElementSelector('question-input');
+
+                            // Add "keydown" listener to the element. The question-input directive listens for keypress of enter to trigger question asking.
+                            // When enter is pressed, proceed with next step. Using 'keydown' to trigger before the directive 'keypress', which clears the value.
+                            $(elementSelector).on('keydown', (event) => {
+                                const value = $(elementSelector).val();
+
+                                if (value && event.key === 'Enter' && !event.shiftKey && !event.ctrlKey) {
+                                    guide.next();
+                                }
+                            });
+                        },
+                        hide: () => () => {
+                            const elementSelector = GuideUtils.getGuideElementSelector('question-input');
+                            // Remove the "keydown" listener of element. It is important when step is hidden.
+                            $(elementSelector).off('keydown');
+                        },
+                        disablePreviousFlow: true,
+                        disableNextFlow: true
+                    }, options)
+                },
+                getWaitForAnswerStep(GuideUtils, options)
+            ];
+
+            if (explain) {
+                const explainBtnSelector = GuideUtils.getLastGuideElementSelector('explain-response-btn');
+                const elementSelector = GuideUtils.getLastGuideElementSelector('chat-item', explainBtnSelector);
+
+                steps.push(
+                    {
+                        // If button is not visible for some reason, skip the whole step
+                        guideBlockName: 'info-message',
+                        options: angular.extend({}, {
+                            url: '/ttyg',
+                            beforeShowPromise: (guide, currentStep) => GuideUtils.waitFor(elementSelector, 1)
+                                .then(() => {
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.next())
+                                })
+                                .catch(() => {
+                                    const stepId = currentStep.id;
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.show(stepId + 3))
+                                }),
+                        }, options)
+                    },
+                    {
+                        guideBlockName: 'clickable-element',
+                        options: angular.extend({}, {
+                            content: 'guide.step_plugin.ask-ttyg-agent.explain-answer',
+                            class: 'explain-answer-guide-dialog',
+                            url: '/ttyg',
+                            elementSelector,
+                            disablePreviousFlow: true,
+                            disableNextFlow: true
+                        }, options)
+                    },
+                    getWaitForAnswerStep(GuideUtils, options)
+                )
+            }
+
+            if (explain && exploreSparql) {
+                const exploreSparqlBtnSelector = GuideUtils.getLastGuideElementSelector('open-in-sparql-editor-btn');
+                const elementSelector = GuideUtils.getLastGuideElementSelector('chat-item', exploreSparqlBtnSelector);
+
+                steps.push(
+                    {
+                        // If button is not visible for some reason, skip the whole step
+                        guideBlockName: 'info-message',
+                        options: angular.extend({}, {
+                            url: '/ttyg',
+                            beforeShowPromise: (guide, currentStep) => GuideUtils.waitFor(elementSelector, 1)
+                                .then(() => {
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.next())
+                                })
+                                .catch(() => {
+                                    const stepId = currentStep.id;
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.show(stepId + 2))
+                                }),
+                        }, options)
+                    },
+                    {
+                        guideBlockName: 'clickable-element',
+                        options: angular.extend({}, {
+                            content: 'guide.step_plugin.ask-ttyg-agent.explore-sparql',
+                            class: 'explore-sparql-guide-dialog',
+                            url: '/ttyg',
+                            disablePreviousFlow: true,
+                            disableNextFlow: true,
+                            elementSelector
+                        }, options)
+                    }
+                )
+            }
+
+            if (explain && explainMore) {
+                const explainMoreBtnSelector = GuideUtils.getLastGuideElementSelector('how-derive-answer-btn');
+                const elementSelector = GuideUtils.getLastGuideElementSelector('chat-item', explainMoreBtnSelector);
+
+                steps.push(
+                    {
+                        // If button is not visible for some reason, skip the whole step
+                        guideBlockName: 'info-message',
+                        options: angular.extend({}, {
+                            url: '/ttyg',
+                            beforeShowPromise: (guide, currentStep) => {
+                                return GuideUtils.waitFor(elementSelector, 1)
+                                    .then(() => {
+                                        // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                        setTimeout(() => guide.next())
+                                    })
+                                    .catch(() => {
+                                        const stepId = currentStep.id;
+                                        // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                        setTimeout(() => guide.show(stepId + 3))
+                                    })
+                            },
+                            disablePreviousFlow: true
+                        }, options)
+                    },
+                    {
+                        guideBlockName: 'clickable-element',
+                        options: angular.extend({}, {
+                            content: 'guide.step_plugin.ask-ttyg-agent.explain-answer-more',
+                            class: 'input-agent-name-guide-dialog',
+                            url: '/ttyg',
+                            elementSelector,
+                            show: (guide) => () => {
+                                // Add "click" listener to the element. Upon clicking the element is hidden and this breaks the default flow of the guide.
+                                // Adding a handler to proceed to next step
+                                $(elementSelector).on('click', () => {
+                                    guide.next()
+                                });
+                            },
+                            hide: () => () => {
+                                // Remove the "click" listener of element. It is important when step is hidden.
+                                $(elementSelector).off('click');
+                            },
+                            disableNextFlow: true
+                        }, options)
+                    },
+                    getWaitForAnswerStep(GuideUtils, options)
+                )
+            }
+
+            return steps;
+        }
+    }
+]);
+
+const getWaitForAnswerStep = (GuideUtils, options) => {
+    return {
+        guideBlockName: 'hold-and-wait-until-hidden',
+        options: angular.extend({}, {
+            content: 'guide.step_plugin.ask-ttyg-agent.wait-for-answer',
+            class: 'wait-for-answer-guide-dialog',
+            url: '/ttyg',
+            placement: 'left',
+            elementSelector: GuideUtils.getGuideElementSelector('chat-details'),
+            elementSelectorToWait: GuideUtils.getGuideElementSelector('question-loader'),
+        }, options)
+    }
+}
 
 PluginRegistry.add('guide.step', [
     {
-        guideBlockName: 'visual-graph',
+        guideBlockName: 'configure-agent',
         getSteps: (options, services) => {
             const GuideUtils = services.GuideUtils;
-            const $location = services.$location;
-            const $route = services.$route;
-            options.mainAction = 'visual-graph';
 
-            return [
+            const configureExtractionMethods = (services, options) => {
+                const methods = options.methods || [];
+
+                return methods.map((method) => {
+                    return {
+                        guideBlockName: method.guideBlockName,
+                        options: angular.extend({}, method.options)
+                    };
+                });
+            };
+
+            const shouldEditName = options.editName;
+            const hasModelName = options.model;
+            const hasUserInstructions = options.userInstructions;
+            const shouldConfigureExtractionMethods = !!options.methods?.length;
+
+            const steps = [
                 {
-                    guideBlockName: 'click-main-menu',
+                    guideBlockName: 'wait-for-element-to-show',
                     options: angular.extend({}, {
-                        menu: 'visual-graph',
-                        showIntro: true
+                        elementSelectorToShow: GuideUtils.getElementSelector('.agent-settings-modal'),
+                        timeToWait: 10
                     }, options)
-                }, {
+                }
+            ]
+
+            if (shouldEditName) {
+                steps.push({
                     guideBlockName: 'input-element',
                     options: angular.extend({}, {
-                        content: 'guide.step_plugin.visual_graph_input_IRI.content',
-                        forceReload: true,
-                        url: '/graphs-visualizations',
-                        elementSelector: GuideUtils.getGuideElementSelector('graphVisualisationSearchInputNotConfigured', ' input'),
-                        class: 'visual-graph-input-iri-guide-dialog',
-                        onNextValidate: (step) => Promise.resolve(GuideUtils.validateTextInput(step.elementSelector, step.easyGraphInputText))
+                        content: 'guide.step_plugin.configure-agent.name-input',
+                        class: 'input-agent-name-guide-dialog',
+                        url: '/ttyg',
+                        disablePreviousFlow: true,
+                        beforeShowPromise: () => GuideUtils.waitFor(GuideUtils.getGuideElementSelector('agent-form'), 5)
+                            .catch((error) => {
+                                services.toastr.error(services.$translate.instant('guide.unexpected.error.message'));
+                                throw error;
+                            }),
+                        elementSelector: GuideUtils.getGuideElementSelector('agent-name'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInputNotEmpty(GuideUtils.getGuideElementSelector('agent-name')))
                     }, options)
-                }, {
-                    guideBlockName: 'clickable-element',
+                })
+            }
+
+            if (shouldConfigureExtractionMethods) {
+                steps.push(...configureExtractionMethods(services, options))
+            }
+
+            if (hasModelName) {
+                steps.push({
+                    guideBlockName: 'input-element',
                     options: angular.extend({}, {
-                        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
+                        content: 'guide.step_plugin.configure-agent.model-input',
+                        class: 'input-model-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('model'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInput(GuideUtils.getGuideElementSelector('model'), options.model, false))
                     }, options)
-                }, {
-                    guideBlockName: 'read-only-element',
+                })
+            }
+
+            if (hasUserInstructions) {
+                steps.push({
+                    guideBlockName: 'input-element',
                     options: angular.extend({}, {
-                        content: 'guide.step_plugin.visual_graph_intro.content',
-                        url: '/graphs-visualizations',
-                        elementSelector: '.graph-visualization',
-                        placement: 'left',
-                        onPreviousClick: () => {
-                            $location.url('/graphs-visualizations');
-                            // the page have to be reloaded because the "Search RDF resource..." input have to be visible, due to implementation
-                            $route.reload();
-                            const searchInputSelector = GuideUtils.getGuideElementSelector('graphVisualisationSearchInputNotConfigured', ' input');
-                            return GuideUtils.waitFor(searchInputSelector, 3)
-                                .then(() => {
-                                    GuideUtils.validateTextInput(searchInputSelector, options.easyGraphInputText);
-                                });
-                        },
-                        initPreviousStep: () => {
-                            const url = '/graphs-visualizations?uri=' + options.iri;
-                            if (url !== decodeURIComponent($location.url())) {
-                                $location.path('/graphs-visualizations').search({uri: options.iri});
-                                return GuideUtils.waitFor(`.node-wrapper[id^="${options.iri}"] circle`, 3);
-                            }
-                            return Promise.resolve();
-                        },
-                        canBePaused: false,
-                        forceReload: true
+                        content: 'guide.step_plugin.configure-agent.user-instructions-input',
+                        class: 'input-user-instructions-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('user-instructions'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInput(GuideUtils.getGuideElementSelector('user-instructions'), options.userInstructions, false))
                     }, options)
-                }
-            ];
+                })
+            }
+
+            return steps;
         }
-    },
+    }
+]);
+
+PluginRegistry.add('guide.step', [
     {
-        guideBlockName: 'visual-graph-expand',
+        guideBlockName: 'end-on-api-key-error',
         getSteps: (options, services) => {
             const GuideUtils = services.GuideUtils;
-            const $rootScope = services.$rootScope;
-            const $route = services.$route;
-            const elementSelector = `.node-wrapper[id^="${options.iri}"] circle`;
+            options.mainAction = 'end-on-api-key-error';
 
-            // Expands visual graph when a node is double-clicked.
-            const dblClickFunction = (guide) => () => {
-                GuideUtils.graphVizExpandNode(elementSelector);
-                guide.getCurrentStep().hide();
-                GuideUtils.awaitAlphaDropD3(null, $rootScope)()
-                    .then(() => {
-                        guide.next();
+            return [
+                {
+                    guideBlockName: 'guide-end',
+                    options: angular.extend({}, {
+                        title: 'guide.step_plugin.ttyg.missing-key.title',
+                        content: 'guide.step_plugin.ttyg.missing-key.content',
+                        url: '/ttyg',
+                        beforeShowPromise: (guide, currentStepDescription) => {
+                            // Check if error toast is visible waiting for 1 seconds
+                            return GuideUtils.waitFor('.toast-message', 1)
+                                .then((element) => {
+                                    if (element.text().includes('graphdb.openai.api-key')) {
+                                        // Error toast is visible, show this step and complete on next click
+                                        currentStepDescription.onNextClick = (guide) => {
+                                            guide.complete();
+                                        };
+                                    } else {
+                                        // Toast is not visible, but not the correct, so we go on
+                                        setTimeout(() => {
+                                            guide.next();
+                                        });
+                                    }
+                                })
+                                .catch(() => {
+                                    // Error toast is not visible, skip this step and move to next one
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => {
+                                        guide.next();
+                                    });
+                                });
+                        }
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'fts-search-method',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'fts-search-method';
+
+            const shouldToggleOff = options.disable;
+            const toggleSelector = GuideUtils.getGuideElementSelector('query-method-fts_search-input');
+
+            if (shouldToggleOff) {
+                return [{
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.fts-search-method.disable-toggle',
+                        class: 'toggle-fts-search-guide-dialog',
+                        url: '/ttyg',
+                        showOn: () => GuideUtils.isChecked(toggleSelector),
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-fts_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(!GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                }]
+            }
+
+            return [
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.fts-search-method.content',
+                        url: '/ttyg',
+                        class: 'info-fts-search-guide-dialog',
+                        disablePreviousFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.fts-search-method.enable-toggle',
+                        class: 'toggle-fts-search-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-fts_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'similarity-search-method',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'similarity-search-method';
+
+            const shouldToggleOff = options.disable;
+            const toggleSelector = GuideUtils.getGuideElementSelector('query-method-similarity_search-input');
+
+            if (shouldToggleOff) {
+                return [{
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.similarity-search-method.disable-toggle',
+                        class: 'toggle-similarity-search-guide-dialog',
+                        url: '/ttyg',
+                        showOn: () => GuideUtils.isChecked(toggleSelector),
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-similarity_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(!GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                }]
+            }
+
+            return [
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.similarity-search-method.content',
+                        url: '/ttyg',
+                        class: 'info-similarity-search-guide-dialog',
+                        disablePreviousFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.similarity-search-method.enable-toggle',
+                        class: 'toggle-similarity-search-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-similarity_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.similarity-search-method.select-index',
+                        elementSelector: GuideUtils.getGuideElementSelector('similarity-index-select'),
+                        class: 'select-similarity-index-guide-dialog',
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'sparql-search-method',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'sparql-search-method';
+
+            const shouldToggleOff = options.disable;
+            const toggleSelector = GuideUtils.getGuideElementSelector('query-method-sparql_search-input');
+
+            if (shouldToggleOff) {
+                return [{
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.sparql-search-method.disable-toggle',
+                        class: 'toggle-sparql-search-guide-dialog',
+                        url: '/ttyg',
+                        showOn: () => GuideUtils.isChecked(toggleSelector),
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-sparql_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(!GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                }]
+            }
+
+            return [
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: `guide.step_plugin.sparql-search-method.content`,
+                        class: 'info-sparql-search-guide-dialog',
+                        url: '/ttyg',
+                        disablePreviousFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.sparql-search-method.enable-toggle',
+                        class: 'toggle-sparql-search-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('query-method-sparql_search'),
+                        clickableElementSelector: toggleSelector,
+                        onNextValidate: () => Promise.resolve(GuideUtils.isChecked(toggleSelector))
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.sparql-search-method.enable-ontology-from-graph',
+                        class: 'enable-ontology-from-graph-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('sparql-ontology-graph-option'),
+                        clickableElementSelector: GuideUtils.getGuideElementSelector('sparql-ontology-graph-option-input'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.isChecked(GuideUtils.getGuideElementSelector('sparql-ontology-graph-option-input')))
+                    }, options)
+                },
+                {
+                    guideBlockName: 'input-element',
+                    options: angular.extend({}, {
+                        content: `guide.step_plugin.sparql-search-method.type-ontology-graph-name`,
+                        class: 'input-ontology-graph-name-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('sparql-ontology-graph-input'),
+                        onNextValidate: () => Promise.resolve(GuideUtils.validateTextInput(GuideUtils.getGuideElementSelector('sparql-ontology-graph-input'), options.ontologyGraph, false))
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'conversation-with-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'conversation-with-ttyg-agent';
+            const startNewConversation = options.startNewConversation;
+            const showInfo = options.showInfo;
+
+            const steps = [];
+
+            if (showInfo) {
+                steps.push({
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        skipPoint: true,
+                        url: '/ttyg',
+                        class: 'conversation-info-guide-dialog',
+                        content: 'guide.step_plugin.conversation-with-ttyg-agent.info',
+                    }, options)
+                })
+            }
+
+            if (startNewConversation) {
+                const createChatBtnSelector = GuideUtils.getGuideElementSelector('create-chat-btn')
+                const newConversationStartSteps = [
+                    {
+                        // If button is not visible for some reason, skip the whole step
+                        guideBlockName: 'info-message',
+                        options: angular.extend({}, {
+                            url: '/ttyg',
+                            beforeShowPromise: (guide, currentStep) => GuideUtils.waitFor(createChatBtnSelector, 1)
+                                .then(() => {
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.next())
+                                })
+                                .catch(() => {
+                                    const stepId = currentStep.id;
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.show(stepId + 2))
+                                }),
+                        }, options)
+                    },
+                    {
+                        guideBlockName: 'clickable-element',
+                        options: angular.extend({}, {
+                            content: 'guide.step_plugin.conversation-with-ttyg-agent.start-conversation',
+                            class: 'start-conversation-guide-dialog',
+                            url: '/ttyg',
+                            elementSelector: createChatBtnSelector,
+                            disableNextFlow: true
+                        }, options)
+                    }
+                ]
+                steps.push(...newConversationStartSteps);
+            }
+
+            const questionSteps = options.questions.map((questionWithOptions) => {
+                return {
+                    guideBlockName: 'ask-ttyg-agent',
+                    options: questionWithOptions
+                };
+            });
+
+            steps.push(...questionSteps);
+
+            return steps;
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'create-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'create-ttyg-agent';
+
+            return [
+                {
+                    guideBlockName: 'click-main-menu',
+                    options: angular.extend({}, {
+                        menu: 'ttyg',
+                        showIntro: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'end-on-api-key-error'
+                },
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-ttyg-agent.intro',
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-ttyg-agent.create-agent',
+                        class: 'create-agent-btn-guide-dialog',
+                        url: '/ttyg',
+                        maxWaitTime: 10,
+                        elementSelector: GuideUtils.getGuideElementSelector('create-agent-btn'),
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'configure-agent',
+                    // Set name field as mandatory for creation
+                    options: angular.extend({}, options, {editName: true})
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.create-ttyg-agent.save-agent-settings',
+                        class: 'save-agent-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('save-agent-settings'),
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'wait-for-element-to-hide',
+                    options: angular.extend({}, {
+                        elementSelectorToHide: GuideUtils.getElementSelector('.agent-settings-modal'),
+                        timeToWait: 10
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'edit-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            const $location = services.$location;
+            options.mainAction = 'edit-ttyg-agent';
+
+            return [
+                {
+                    guideBlockName: 'click-main-menu',
+                    options: angular.extend({}, {
+                        menu: 'ttyg',
+                        showOn: () => '/ttyg' !== $location.path()
+                    }, options)
+                },
+                {
+                    guideBlockName: 'end-on-api-key-error'
+                },
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.edit-ttyg-agent.intro',
+                        skipPoint: true
+                    }, options)
+                },
+                {
+                    // Skip next step (which is actually 5 core steps) if there is a selected agent
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        beforeShowPromise: (guide, currentStep) => {
+                            if (GuideUtils.isGuideElementVisible('selected-agent')) {
+                                setTimeout(() => {
+                                    // Using a timeout because the library executes async logic
+                                    guide.show(currentStep.id + 6);
+                                })
+                            } else {
+                                setTimeout(() => {
+                                    // Using a timeout because the library executes async logic
+                                    guide.next()
+                                });
+                            }
+                        }
+                    }, options)
+                },
+                {
+                    guideBlockName: 'select-ttyg-agent',
+                    options: angular.extend({}, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.edit-ttyg-agent.edit-agent',
+                        class: 'edit-agent-btn-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('edit-current-agent'),
+                        disablePreviousFlow: true,
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'configure-agent',
+                    options
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.edit-ttyg-agent.save-agent-settings',
+                        class: 'save-agent-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('save-agent-settings'),
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'wait-for-element-to-hide',
+                    options: angular.extend({}, {
+                        elementSelectorToHide: GuideUtils.getElementSelector('.agent-settings-modal'),
+                        timeToWait: 10
+                    }, options)
+                }
+            ];
+        }
+    }
+]);
+
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'select-ttyg-agent',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            options.mainAction = 'select-ttyg-agent';
+
+            return [
+                {
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.select-ttyg-agent.info.content',
+                        url: '/ttyg',
+                        class: 'select-ttyg-agent-guide-dialog',
+                        skipPoint: true,
+                        disablePreviousFlow: true,
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.select-ttyg-agent.open-agent-dropdown',
+                        class: 'open-agent-dropdown-guide-dialog',
+                        url: '/ttyg',
+                        elementSelector: GuideUtils.getGuideElementSelector('select-agent-dropdown'),
+                        disableNextFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.select-ttyg-agent.select-agent',
+                        elementSelector: GuideUtils.getGuideElementSelector('select-agent-panel'),
+                        class: 'select-your-agent-guide-dialog',
+                        show: () => () => {
+                            const elementToObserve = document.querySelector(GuideUtils.getGuideElementSelector('select-agent-dropdown'));
+                            const dropdownToggleElement = document.querySelector(GuideUtils.getGuideElementSelector('select-agent-dropdown-toggle'));
+
+                            options.observer = new MutationObserver(attributesChangeCallback);
+                            options.observer.observe(elementToObserve, {attributes: true});
+
+                            function attributesChangeCallback(mutationList) {
+                                for (const mutation of mutationList) {
+                                    if (mutation.type === 'attributes') {
+                                        const isOpened = mutation.target.classList.contains('open');
+
+                                        // The component we use for selecting the agent automatically closes
+                                        // after the user clicks on the view, which is why we have to open it.
+                                        if (!(isOpened)) {
+                                            dropdownToggleElement.click();
+                                        }
+                                    }
+                                }
+                            }
+                        },
+                        disablePreviousFlow: true,
+                        disableNextFlow: true,
+                        hide: () => () => {
+                            options.observer.disconnect();
+                        }
+                    }, options)
+                },
+                {
+                    // If missing repository modal is visible go to next step, otherwise skip it
+                    guideBlockName: 'info-message',
+                    options: angular.extend({}, {
+                        beforeShowPromise: (guide, currentStep) => {
+                            return GuideUtils.getOrWaitFor(GuideUtils.getElementSelector('.confirm-dialog .cancel-btn'), 1)
+                                .then(() => {
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.next())
+                                })
+                                .catch(() => {
+                                    const stepId = currentStep.id;
+                                    // Using a timeout because the library executes logic to show the step in a then clause which causes current and next steps to show
+                                    setTimeout(() => guide.show(stepId + 2))
+                                })
+                        },
+                        disablePreviousFlow: true
+                    }, options)
+                },
+                {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.select-ttyg-agent.missing-repository',
+                        elementSelector: GuideUtils.getElementSelector('.confirm-dialog .cancel-btn'),
+                        showOn: () => GuideUtils.isVisible('.confirm-dialog .cancel-btn'),
+                        onNextClick: () => {
+                            // Close the modal by clicking on cancel button
+                            GuideUtils.clickOnElement('.confirm-dialog .cancel-btn')();
+                        },
+                        show: (guide, currentStep) => () => {
+                            const currentStepId = currentStep.id;
+                            // Add "click" listener to the element. Upon clicking the element the guide is set back 3 steps to open dropdown step
+                            $(currentStep.elementSelector).on('click', () => {
+                                guide.show(currentStepId - 3)
+                            });
+                        },
+                        hide: (guide, currentStep) => () => {
+                            // Remove the "click" listener of element. It is important when step is hidden.
+                            $(currentStep.elementSelector).off('click');
+                        }
+                    }, options)
+                },
+            ];
+        }
+    }
+]);
+
+const disableAllNodes = () => () => {
+    $('.node-wrapper').addClass('disable-visual-graph-node');
+};
+
+const enableAllNodes = () => () => {
+    $('.node-wrapper').removeClass('disable-visual-graph-node');
+};
+
+PluginRegistry.add('guide.step', [
+    {
+        guideBlockName: 'visual-graph',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            const $location = services.$location;
+            const $route = services.$route;
+            options.mainAction = 'visual-graph';
+
+            return [
+                {
+                    guideBlockName: 'click-main-menu',
+                    options: angular.extend({}, {
+                        menu: 'visual-graph',
+                        showIntro: true
+                    }, options)
+                }, {
+                    guideBlockName: 'input-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.visual_graph_input_IRI.content',
+                        forceReload: true,
+                        url: '/graphs-visualizations',
+                        elementSelector: GuideUtils.getGuideElementSelector('graphVisualisationSearchInputNotConfigured', ' input'),
+                        class: 'visual-graph-input-iri-guide-dialog',
+                        onNextValidate: (step) => Promise.resolve(GuideUtils.validateTextInput(step.elementSelector, step.easyGraphInputText))
+                    }, options)
+                }, {
+                    guideBlockName: 'clickable-element',
+                    options: angular.extend({}, {
+                        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
+                    }, options)
+                }, {
+                    guideBlockName: 'read-only-element',
+                    options: angular.extend({}, {
+                        content: 'guide.step_plugin.visual_graph_intro.content',
+                        url: '/graphs-visualizations',
+                        elementSelector: '.graph-visualization',
+                        placement: 'left',
+                        onPreviousClick: () => {
+                            $location.url('/graphs-visualizations');
+                            // the page have to be reloaded because the "Search RDF resource..." input have to be visible, due to implementation
+                            $route.reload();
+                            const searchInputSelector = GuideUtils.getGuideElementSelector('graphVisualisationSearchInputNotConfigured', ' input');
+                            return GuideUtils.waitFor(searchInputSelector, 3)
+                                .then(() => {
+                                    GuideUtils.validateTextInput(searchInputSelector, options.easyGraphInputText);
+                                });
+                        },
+                        initPreviousStep: () => {
+                            const url = '/graphs-visualizations?uri=' + options.iri;
+                            if (url !== decodeURIComponent($location.url())) {
+                                $location.path('/graphs-visualizations').search({uri: options.iri});
+                                return GuideUtils.waitFor(`.node-wrapper[id^="${options.iri}"] circle`, 3);
+                            }
+                            return Promise.resolve();
+                        },
+                        canBePaused: false,
+                        forceReload: true
+                    }, options)
+                }
+            ];
+        }
+    },
+    {
+        guideBlockName: 'visual-graph-expand',
+        getSteps: (options, services) => {
+            const GuideUtils = services.GuideUtils;
+            const $rootScope = services.$rootScope;
+            const $route = services.$route;
+            const elementSelector = `.node-wrapper[id^="${options.iri}"] circle`;
+
+            // Expands visual graph when a node is double-clicked.
+            const dblClickFunction = (guide) => () => {
+                GuideUtils.graphVizExpandNode(elementSelector);
+                guide.getCurrentStep().hide();
+                GuideUtils.awaitAlphaDropD3(null, $rootScope)()
+                    .then(() => {
+                        guide.next();
                     });
             };
 
@@ -1921,6 +2937,7 @@ const beforeShowPromise = (services, elementSelector, maxWaitTime) => {
 
 PluginRegistry.add('guide.step', [
     {
+        // An element which is expected to be clicked. If onNextClick is not defined, it will automatically click on the element on next button press
         guideBlockName: 'clickable-element',
         getStep: (options, services) => {
             const notOverridable = {
@@ -1929,7 +2946,7 @@ PluginRegistry.add('guide.step', [
 
             const stepDescription = angular.extend({}, BASIC_STEP, {
                 advanceOn: {
-                    selector: options.elementSelector,
+                    selector: options.clickableElementSelector || options.elementSelector,
                     event: 'click'
                 },
                 initPreviousStep: services.GuideUtils.defaultInitPreviousStep
@@ -1942,6 +2959,21 @@ PluginRegistry.add('guide.step', [
         }
     },
     {
+        // An element which is expected to be focused. It allows user interaction.
+        guideBlockName: 'focus-element',
+        getStep: (options, services) => {
+            const stepDescription = angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep
+            }, options);
+
+            if (!stepDescription.beforeShowPromise) {
+                stepDescription.beforeShowPromise = beforeShowPromise(services, stepDescription.elementSelector, stepDescription.maxWaitTime);
+            }
+            return stepDescription;
+        }
+    },
+    {
+        // An element which is expected to be focused, but interactions are disabled.
         guideBlockName: 'read-only-element',
         getStep: (options, services) => {
             const notOverridable = {
@@ -1984,18 +3016,71 @@ PluginRegistry.add('guide.step', [
         }
     },
     {
-        guideBlockName: 'guide-end',
+        guideBlockName: 'hold-and-wait-until-hidden',
         getStep: (options, services) => {
             const notOverridable = {
-                type: 'readonly',
-                title: 'guide.step_plugin.guide-ended.title',
-                content: 'guide.step_plugin.guide-ended.content',
+                type: 'readonly'
+            };
+            return angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep,
+                disablePreviousFlow: true,
+                onNextValidate: () => Promise.resolve(!services.GuideUtils.isVisible(options.elementSelectorToWait))
+            }, options, notOverridable);
+        }
+    },
+    {
+        guideBlockName: 'hold-and-wait-until-shown',
+        getStep: (options, services) => {
+            const notOverridable = {
+                type: 'readonly'
+            };
+            return angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep,
+                disablePreviousFlow: true,
+                onNextValidate: () => Promise.resolve(services.GuideUtils.isVisible(options.elementSelectorToWait))
+            }, options, notOverridable);
+        }
+    },
+    {
+        guideBlockName: 'wait-for-element-to-hide',
+        getStep: (options, services) => {
+            return angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep,
+                beforeShowPromise: (guide) => services.GuideUtils.waitUntilHidden(options.elementSelectorToHide, options.timeToWait || 2)
+                    .catch(() => {
+                        services.ShepherdService._abortGuide(guide)
+                    }),
                 show: (guide) => () => {
-                    guide.options.confirmCancel = false;
-                },
-                hide: (guide) => () => {
-                    guide.options.confirmCancel = true;
+                    // Using a timeout because the library executes async logic
+                    setTimeout(() => guide.next())
                 }
+            }, options);
+        }
+    },
+    {
+        guideBlockName: 'wait-for-element-to-show',
+        getStep: (options, services) => {
+            return angular.extend({}, BASIC_STEP, {
+                initPreviousStep: services.GuideUtils.defaultInitPreviousStep,
+                beforeShowPromise: (guide) => services.GuideUtils.getOrWaitFor(options.elementSelectorToShow, options.timeToWait || 2)
+                    .catch(() => {
+                        services.ShepherdService._abortGuide(guide)
+                    }),
+                show: (guide) => () => {
+                    // Using a timeout because the library executes async logic
+                    setTimeout(() => guide.next())
+                }
+            }, options);
+        }
+    },
+    {
+        guideBlockName: 'guide-end',
+        getStep: (options, services) => {
+            const notOverridable = {
+                type: 'readonly',
+                title: options.title || 'guide.step_plugin.guide-ended.title',
+                content: options.content || 'guide.step_plugin.guide-ended.content',
+                lastStep: true
             };
             return angular.extend({}, BASIC_STEP, {
                 initPreviousStep: services.GuideUtils.defaultInitPreviousStep
@@ -2014,7 +3099,8 @@ PluginRegistry.add('route', {
     'title': 'common.import',
     'reloadOnSearch': false,
     'helpInfo': 'view.import.helpInfo',
-    'documentationUrl': 'loading-data-using-the-workbench.html'
+    'documentationUrl': 'loading-data-using-the-workbench.html',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -2041,7 +3127,8 @@ PluginRegistry.add('route', [
         'templateUrl': 'pages/jdbc.html',
         'title': 'view.jdbc.title',
         'helpInfo': 'view.jdbc.helpInfo',
-        'documentationUrl': 'sql-access-over-jdbc.html'
+        'documentationUrl': 'sql-access-over-jdbc.html',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     },
     {
         'url': '/jdbc/configuration/create',
@@ -2051,7 +3138,8 @@ PluginRegistry.add('route', [
         'controller': 'JdbcCreateCtrl',
         'templateUrl': 'pages/jdbc-create.html',
         'title': 'view.jdbc.create.title',
-        'helpInfo': 'view.jdbc.create.helpInfo'
+        'helpInfo': 'view.jdbc.create.helpInfo',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }
 ]);
 
@@ -2071,7 +3159,8 @@ PluginRegistry.add('route', {
     'templateUrl': 'pages/namespaces.html',
     'title': 'menu.namespaces.label',
     'helpInfo': 'view.namespaces.helpInfo',
-    'documentationUrl': 'configuring-a-repository.html#namespaces-defined-for-the-repository'
+    'documentationUrl': 'configuring-a-repository.html#namespaces-defined-for-the-repository',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -2113,7 +3202,8 @@ PluginRegistry.add('route', {
     'templateUrl': 'pages/plugins.html',
     'title': 'menu.plugins.label',
     'helpInfo': 'view.plugins.helpInfo',
-    'documentationUrl': 'using-plugins.html'
+    'documentationUrl': 'using-plugins.html',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -2148,7 +3238,8 @@ PluginRegistry.add('route', {
     'templateUrl': 'pages/monitor/queries.html',
     'title': 'view.query.and.update.monitoring.title',
     'helpInfo': 'view.query.and.update.monitoring.helpInfo',
-    'documentationUrl': 'query-monitoring.html'
+    'documentationUrl': 'query-monitoring.html',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -2182,7 +3273,8 @@ PluginRegistry.add('route', {
     'templateUrl': 'pages/rdfrank.html',
     'title': 'view.rdf.rank.title',
     'helpInfo': 'view.rdf.rank.helpInfo',
-    'documentationUrl': 'ranking-results.html'
+    'documentationUrl': 'ranking-results.html',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -2218,7 +3310,8 @@ PluginRegistry.add('route', [
         'templateUrl': 'pages/repositories.html',
         'title': 'menu.repositories.label',
         'helpInfo': 'view.repositories.helpInfo',
-        'documentationUrl': 'creating-a-repository.html'
+        'documentationUrl': 'creating-a-repository.html',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/repository/create',
         'module': 'graphdb.framework.repositories',
@@ -2226,7 +3319,8 @@ PluginRegistry.add('route', [
         'chunk': 'repositories',
         'controller': 'ChooseRepositoryCtrl',
         'templateUrl': 'pages/choose-repository-type.html',
-        'title': 'view.choose.repo.title'
+        'title': 'view.choose.repo.title',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/repository/create/:repositoryType',
         'module': 'graphdb.framework.repositories',
@@ -2234,7 +3328,8 @@ PluginRegistry.add('route', [
         'chunk': 'repositories',
         'controller': 'AddRepositoryCtrl',
         'templateUrl': 'pages/repository.html',
-        'title': 'Create Repository'
+        'title': 'Create Repository',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/repository/edit/:repositoryId',
         'module': 'graphdb.framework.repositories',
@@ -2242,7 +3337,8 @@ PluginRegistry.add('route', [
         'chunk': 'repositories',
         'controller': 'EditRepositoryCtrl',
         'templateUrl': 'pages/repository.html',
-        'title': 'Edit Repository'
+        'title': 'Edit Repository',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }
 ]);
 
@@ -2283,7 +3379,8 @@ PluginRegistry.add('route', {
     'title': 'view.resource.monitoring.title',
     'helpInfo': 'view.resource.monitoring.helpInfo',
     'reloadOnSearch': false,
-    'documentationUrl': 'system-monitoring.html'
+    'documentationUrl': 'system-monitoring.html',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -2319,7 +3416,8 @@ PluginRegistry.add('route', [
         'templateUrl': 'js/angular/security/templates/users.html',
         'title': 'menu.users.and.access.label',
         'helpInfo': 'view.users.access.helpInfo',
-        'documentationUrl': 'working-with-workbench.html#wbmenu-users-and-access'
+        'documentationUrl': 'working-with-workbench.html#wbmenu-users-and-access',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/user/create',
         'module': 'graphdb.framework.security',
@@ -2327,7 +3425,8 @@ PluginRegistry.add('route', [
         'chunk': 'security',
         'controller': 'AddUserCtrl',
         'templateUrl': 'js/angular/security/templates/user.html',
-        'title': 'Create new user'
+        'title': 'Create new user',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/login',
         'module': 'graphdb.framework.security',
@@ -2343,7 +3442,8 @@ PluginRegistry.add('route', [
         'chunk': 'security',
         'controller': 'EditUserCtrl',
         'templateUrl': 'js/angular/security/templates/user.html',
-        'title': 'Edit user'
+        'title': 'Edit user',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/settings',
         'module': 'graphdb.framework.security',
@@ -2364,7 +3464,8 @@ PluginRegistry.add('route', [
         'chunk': 'security',
         'controller': 'RolesMappingController',
         'templateUrl': 'js/angular/security/templates/roles.html',
-        'title': 'view.roles.mapping.title'
+        'title': 'view.roles.mapping.title',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/ux-test1',
         'templateUrl': 'pages/ux-test1.html',
@@ -2418,7 +3519,8 @@ PluginRegistry.add('route', [
         'controller': 'RegisterLicenseCtrl',
         'templateUrl': 'pages/registerLicenseInfo.html',
         'title': 'view.register.license.title',
-        'helpInfo': 'view.register.license.helpInfo'
+        'helpInfo': 'view.register.license.helpInfo',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/license',
         'module': 'graphdb.framework.settings',
@@ -2428,7 +3530,8 @@ PluginRegistry.add('route', [
         'templateUrl': 'pages/licenseInfo.html',
         'title': 'view.existing.license.title',
         'helpInfo': 'view.existing.license.helpInfo',
-        'documentationUrl': 'working-with-workbench.html#wbmenu-license'
+        'documentationUrl': 'working-with-workbench.html#wbmenu-license',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }
 ]);
 
@@ -2454,7 +3557,8 @@ PluginRegistry.add('route', [
         'templateUrl': 'pages/similarity-indexes.html',
         'title': 'view.similarity.indexes.title',
         'helpInfo': 'view.similarity.indexes.helpInfo',
-        'documentationUrl': 'semantic-similarity-searches.html#text-based-similarity-searches'
+        'documentationUrl': 'semantic-similarity-searches.html#text-based-similarity-searches',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/similarity/index/create',
         'module': 'graphdb.framework.similarity',
@@ -2463,7 +3567,8 @@ PluginRegistry.add('route', [
         'controller': 'CreateSimilarityIdxCtrl',
         'templateUrl': 'pages/create-index.html',
         'title': 'view.create.similarity.index.title',
-        'helpInfo': 'view.create.similarity.index.helpInfo'
+        'helpInfo': 'view.create.similarity.index.helpInfo',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }
 ]);
 
@@ -2504,7 +3609,8 @@ PluginRegistry.add('route', {
     'title': 'view.sparql-editor.title',
     'helpInfo': 'view.sparql-editor.helpInfo',
     'reloadOnSearch': false,
-    'documentationUrl': 'sparql-queries.html'
+    'documentationUrl': 'sparql-queries.html',
+    'allowAuthorities': ['READ_REPO_{repoId}']
 });
 
 PluginRegistry.add('main.menu', {
@@ -2531,7 +3637,8 @@ PluginRegistry.add('route', [
         'templateUrl': 'pages/sparql-templates.html',
         'title': 'view.sparql.template.title',
         'helpInfo': 'view.sparql.template.helpInfo',
-        'documentationUrl': 'updating-data.html#from-the-sparql-editor'
+        'documentationUrl': 'updating-data.html#from-the-sparql-editor',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     },
     {
         'url': '/sparql-template/create',
@@ -2541,7 +3648,8 @@ PluginRegistry.add('route', [
         'controller': 'SparqlTemplateCreateCtrl',
         'templateUrl': 'pages/sparql-template-create.html',
         'title': 'view.create.sparql.template.title',
-        'helpInfo': 'view.create.sparql.template.helpInfo'
+        'helpInfo': 'view.create.sparql.template.helpInfo',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }
 ]);
 
@@ -2578,7 +3686,8 @@ PluginRegistry.add('route', [
         'templateUrl': 'pages/info.html',
         'title': 'view.system.information.title',
         'helpInfo': 'view.system.information.helpInfo',
-        'documentationUrl': 'diagnosing-and-reporting-critical-errors.html#running-a-system-report'
+        'documentationUrl': 'diagnosing-and-reporting-critical-errors.html#running-a-system-report',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }, {
         'url': '/webapi',
         'templateUrl': 'pages/webapi.html',
@@ -2663,7 +3772,8 @@ PluginRegistry.add('route', [
         'controller': 'TTYGViewCtrl',
         'title': 'menu.ttyg.label',
         'helpInfo': 'ttyg.helpInfo',
-        'documentationUrl': 'talk-to-graph.html'
+        'documentationUrl': 'talk-to-graph.html',
+        'allowAuthorities': ['READ_REPO_{repoId}']
     }
 ]);