Merge branch 'master' of https://github.com/Azure/cosmos-explorer into eslint/fix-lint-utility

Add initializeGitHubRepos function in useNotebooks store (#957 )
Fix validateCollectionId for new tables account (#958 )
2025-12-23 10:51:30 +00:00 · 2021-07-26 18:40:40 +05:30 · 2021-07-23 18:44:24 -07:00 · 2021-07-23 18:44:16 -07:00 · 2021-07-22 17:11:19 -07:00 · 2021-07-22 16:18:48 -07:00
795 changed files with 71121 additions and 43526 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,16 +1 @@
-PORTAL_RUNNER_USERNAME=
-PORTAL_RUNNER_PASSWORD=
-PORTAL_RUNNER_SUBSCRIPTION=
-PORTAL_RUNNER_RESOURCE_GROUP=
-PORTAL_RUNNER_DATABASE_ACCOUNT=
-PORTAL_RUNNER_DATABASE_ACCOUNT_KEY=
-PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT=
-PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY=
-PORTAL_RUNNER_CONNECTION_STRING=
-NOTEBOOKS_TEST_RUNNER_TENANT_ID=
-NOTEBOOKS_TEST_RUNNER_CLIENT_ID=
-NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET=
-CASSANDRA_CONNECTION_STRING=
-MONGO_CONNECTION_STRING=
-TABLES_CONNECTION_STRING=
 DATA_EXPLORER_ENDPOINT=https://localhost:1234/hostedExplorer.html
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,37 +1,26 @@
 **/node_modules/
+src/**/__mocks__/**/*
 dist/
 Contracts/
 src/Api/Apis.ts
 src/AuthType.ts
 src/Bindings/BindingHandlersRegisterer.ts
 src/Bindings/ReactBindingHandler.ts
-src/Common/ArrayHashMap.ts
 src/Common/Constants.ts
 src/Common/CosmosClient.test.ts
 src/Common/CosmosClient.ts
 src/Common/DataAccessUtilityBase.test.ts
 src/Common/DataAccessUtilityBase.ts
-src/Common/DeleteFeedback.ts
-src/Common/DocumentClientUtilityBase.ts
 src/Common/EditableUtility.ts
 src/Common/HashMap.test.ts
-src/Common/HashMap.ts
-src/Common/HeadersUtility.test.ts
-src/Common/HeadersUtility.ts
-src/Common/IteratorUtilities.test.ts
-src/Common/IteratorUtilities.ts
 src/Common/Logger.test.ts
 src/Common/MessageHandler.test.ts
 src/Common/MessageHandler.ts
 src/Common/MongoProxyClient.test.ts
 src/Common/MongoUtility.ts
 src/Common/NotificationsClientBase.ts
-src/Common/ObjectCache.test.ts
-src/Common/ObjectCache.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
-src/Common/ThemeUtility.ts
-src/Common/UrlUtility.ts
 src/Config.ts
 src/Contracts/ActionContracts.ts
 src/Contracts/DataModels.ts
@@ -53,13 +42,9 @@ src/Definitions/jquery.d.ts
 src/Definitions/plotly.js-cartesian-dist.d-min.ts
 src/Definitions/png.d.ts
 src/Definitions/svg.d.ts
-src/Definitions/worker.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
-src/Explorer/ContextMenuButtonFactory.ts
 src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
-src/Explorer/Controls/CommandButton/CommandButton.test.ts
-src/Explorer/Controls/CommandButton/CommandButton.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
 src/Explorer/Controls/DynamicList/DynamicList.test.ts
 src/Explorer/Controls/DynamicList/DynamicListComponent.ts
@@ -68,7 +53,6 @@ src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts
 src/Explorer/Controls/InputTypeahead/InputTypeahead.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
 src/Explorer/Controls/Notebook/NotebookAppMessageHandler.ts
-src/Explorer/Controls/ThroughputInput/ThroughputInput.test.ts
 src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.ts
 src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
 src/Explorer/Controls/Toolbar/IToolbarAction.ts
@@ -87,7 +71,6 @@ src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
 src/Explorer/DataSamples/DataSamplesUtil.test.ts
 src/Explorer/DataSamples/DataSamplesUtil.ts
-src/Explorer/Explorer.tsx
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
 src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
@@ -95,22 +78,12 @@ src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
 src/Explorer/Graph/GraphExplorerComponent/EdgeInfoCache.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
-src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts
-src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
-src/Explorer/Graph/GraphStyleComponent/GraphStyle.test.ts
-src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.ts
-src/Explorer/Graph/NewVertexComponent/NewVertex.test.ts
-src/Explorer/Graph/NewVertexComponent/NewVertexComponent.ts
-src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
-src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
-src/Explorer/Notebook/FileSystemUtil.ts
-src/Explorer/Notebook/NTeractUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -125,52 +98,17 @@ src/Explorer/Notebook/NotebookContainerClient.ts
 src/Explorer/Notebook/NotebookContentClient.ts
 src/Explorer/Notebook/NotebookContentItem.ts
 src/Explorer/Notebook/NotebookUtil.ts
-src/Explorer/OpenActions.test.ts
-src/Explorer/OpenActions.ts
 src/Explorer/OpenActionsStubs.ts
-src/Explorer/Panes/AddCollectionPane.test.ts
-src/Explorer/Panes/AddCollectionPane.ts
-src/Explorer/Panes/AddDatabasePane.test.ts
-src/Explorer/Panes/AddDatabasePane.ts
-src/Explorer/Panes/BrowseQueriesPane.ts
-src/Explorer/Panes/CassandraAddCollectionPane.ts
-src/Explorer/Panes/ContextualPaneBase.ts
-src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
-src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
-src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
-src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
-src/Explorer/Panes/ExecuteSprocParamsPane.ts
-src/Explorer/Panes/GraphStylingPane.ts
-src/Explorer/Panes/LoadQueryPane.ts
-src/Explorer/Panes/NewVertexPane.ts
-src/Explorer/Panes/PaneComponents.ts
-src/Explorer/Panes/RenewAdHocAccessPane.ts
-src/Explorer/Panes/SaveQueryPane.ts
-src/Explorer/Panes/SettingsPane.test.ts
-src/Explorer/Panes/SettingsPane.ts
-src/Explorer/Panes/SetupNotebooksPane.ts
-src/Explorer/Panes/StringInputPane.ts
-src/Explorer/Panes/SwitchDirectoryPane.ts
-src/Explorer/Panes/Tables/AddTableEntityPane.ts
-src/Explorer/Panes/Tables/EditTableEntityPane.ts
-src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
-src/Explorer/Panes/Tables/QuerySelectPane.ts
-src/Explorer/Panes/Tables/TableColumnOptionsPane.ts
-src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
-src/Explorer/Panes/UploadFilePane.ts
-src/Explorer/Panes/UploadItemsPane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
-src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
 src/Explorer/Tables/DataTable/DataTableBindingManager.ts
 src/Explorer/Tables/DataTable/DataTableBuilder.ts
 src/Explorer/Tables/DataTable/DataTableContextMenu.ts
 src/Explorer/Tables/DataTable/DataTableOperationManager.ts
 src/Explorer/Tables/DataTable/DataTableOperations.ts
-src/Explorer/Tables/DataTable/DataTableUtilities.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
 src/Explorer/Tables/DataTable/TableCommands.ts
 src/Explorer/Tables/DataTable/TableEntityCache.ts
@@ -179,211 +117,77 @@ src/Explorer/Tables/Entities.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroup.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts
 src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
-src/Explorer/Tables/QueryBuilder/DateTimeUtilities.test.ts
-src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts
 src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
-src/Explorer/Tables/QueryBuilder/QueryViewModel.ts
 src/Explorer/Tables/TableDataClient.ts
 src/Explorer/Tables/TableEntityProcessor.ts
-src/Explorer/Tables/Utilities.ts
 src/Explorer/Tabs/ConflictsTab.ts
 src/Explorer/Tabs/DatabaseSettingsTab.ts
 src/Explorer/Tabs/DocumentsTab.test.ts
 src/Explorer/Tabs/DocumentsTab.ts
 src/Explorer/Tabs/GraphTab.ts
 src/Explorer/Tabs/MongoDocumentsTab.ts
-src/Explorer/Tabs/MongoQueryTab.ts
-src/Explorer/Tabs/MongoShellTab.ts
 src/Explorer/Tabs/NotebookV2Tab.ts
-src/Explorer/Tabs/QueryTab.test.ts
-src/Explorer/Tabs/QueryTab.ts
-src/Explorer/Tabs/QueryTablesTab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
-src/Explorer/Tabs/StoredProcedureTab.ts
 src/Explorer/Tabs/TabComponents.ts
 src/Explorer/Tabs/TabsBase.ts
 src/Explorer/Tabs/TriggerTab.ts
 src/Explorer/Tabs/UserDefinedFunctionTab.ts
 src/Explorer/Tree/AccessibleVerticalList.ts
-src/Explorer/Tree/Collection.test.ts
 src/Explorer/Tree/Collection.ts
 src/Explorer/Tree/ConflictId.ts
-src/Explorer/Tree/Database.ts
 src/Explorer/Tree/DocumentId.ts
 src/Explorer/Tree/ObjectId.ts
 src/Explorer/Tree/ResourceTokenCollection.ts
 src/Explorer/Tree/StoredProcedure.ts
 src/Explorer/Tree/TreeComponents.ts
 src/Explorer/Tree/Trigger.ts
-src/Explorer/Tree/UserDefinedFunction.ts
 src/Explorer/WaitsForTemplateViewModel.ts
 src/GitHub/GitHubClient.test.ts
 src/GitHub/GitHubClient.ts
 src/GitHub/GitHubConnector.ts
-src/GitHub/GitHubContentProvider.test.ts
-src/GitHub/GitHubContentProvider.ts
 src/GitHub/GitHubOAuthService.ts
-src/HostedExplorer.ts
 src/Index.ts
 src/Juno/JunoClient.test.ts
 src/Juno/JunoClient.ts
-src/Main.ts
-src/NotebookWorkspaceManager/NotebookWorkspaceManager.ts
-src/NotebookWorkspaceManager/NotebookWorkspaceResourceProviderMockClients.ts
-src/Platform/Emulator/DataAccessUtility.ts
-src/Platform/Emulator/ExplorerFactory.ts
-src/Platform/Emulator/Main.ts
-src/Platform/Emulator/NotificationsClient.ts
-src/Platform/Hosted/ArmResourceUtils.ts
 src/Platform/Hosted/Authorization.ts
-src/Platform/Hosted/DataAccessUtility.ts
-src/Platform/Hosted/ExplorerFactory.ts
-src/Platform/Hosted/Helpers/ConnectionStringParser.test.ts
-src/Platform/Hosted/Main.ts
-src/Platform/Hosted/Maint.test.ts
-src/Platform/Hosted/NotificationsClient.ts
-src/Platform/Portal/DataAccessUtility.ts
-src/Platform/Portal/ExplorerFactory.ts
-src/Platform/Portal/Main.ts
-src/Platform/Portal/NotificationsClient.ts
-src/PlatformType.ts
 src/ReactDevTools.ts
-src/ResourceProvider/IResourceProviderClient.test.ts
-src/ResourceProvider/IResourceProviderClient.ts
-src/ResourceProvider/ResourceProviderClient.ts
-src/ResourceProvider/ResourceProviderClientFactory.ts
-src/RouteHandlers/RouteHandler.ts
-src/RouteHandlers/TabRouteHandler.test.ts
-src/RouteHandlers/TabRouteHandler.ts
 src/Shared/Constants.ts
 src/Shared/DefaultExperienceUtility.test.ts
 src/Shared/DefaultExperienceUtility.ts
-src/Shared/ExplorerSettings.ts
-src/Shared/PriceEstimateCalculator.ts
-src/Shared/StorageUtility.test.ts
-src/Shared/StorageUtility.ts
-src/Shared/StringUtility.test.ts
-src/Shared/StringUtility.ts
 src/Shared/appInsights.ts
 src/SparkClusterManager/ArcadiaResourceManager.ts
 src/SparkClusterManager/SparkClusterManager.ts
 src/Terminal/JupyterLabAppFactory.ts
 src/Terminal/NotebookAppContracts.d.ts
-src/Terminal/index.ts
-src/TokenProviders/PortalTokenProvider.ts
-src/TokenProviders/TokenProviderFactory.ts
-src/Utils/AuthorizationUtils.test.ts
-src/Utils/AuthorizationUtils.ts
-src/Utils/AutoPilotUtils.test.ts
-src/Utils/AutoPilotUtils.ts
-src/Utils/DatabaseAccountUtils.test.ts
-src/Utils/DatabaseAccountUtils.ts
-src/Utils/JunoUtils.ts
-src/Utils/MessageValidation.ts
-src/Utils/NotebookConfigurationUtils.ts
-src/Utils/PricingUtils.test.ts
-src/Utils/QueryUtils.test.ts
-src/Utils/QueryUtils.ts
-src/Utils/StringUtils.test.ts
-src/Utils/StringUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
-src/quickstart.ts
 src/setupTests.ts
-src/workers/upload/definitions.ts
-src/workers/upload/index.ts
-src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
-src/Explorer/Controls/Accordion/AccordionComponent.tsx
-src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.test.tsx
-src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx
-src/Explorer/Controls/AccountSwitch/AccountSwitchComponentAdapter.tsx
-src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx
-src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx
-src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
-src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx
-src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx
-src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.test.tsx
-src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx
-src/Explorer/Controls/Directory/DirectoryComponentAdapter.tsx
-src/Explorer/Controls/Directory/DirectoryListComponent.test.tsx
-src/Explorer/Controls/Directory/DirectoryListComponent.tsx
-src/Explorer/Controls/Editor/EditorReact.tsx
 src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
-src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
-src/NotebookViewer/NotebookViewer.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
-src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
-src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx
-src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx
-src/Explorer/Controls/Spark/ClusterSettingsComponent.tsx
-src/Explorer/Controls/Spark/ClusterSettingsComponentAdapter.tsx
-src/Explorer/Controls/Tabs/TabComponent.tsx
-src/Explorer/Controls/TreeComponent/TreeComponent.test.tsx
 src/Explorer/Controls/TreeComponent/TreeComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.test.tsx
-src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
-src/Explorer/Graph/GraphExplorerComponent/GraphExplorerAdapter.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
-src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
-src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
-src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
-src/Explorer/Menus/NavBar/ControlBarComponent.tsx
-src/Explorer/Menus/NavBar/ControlBarComponentAdapter.tsx
-src/Explorer/Menus/NavBar/MeControlComponent.test.tsx
-src/Explorer/Menus/NavBar/MeControlComponent.tsx
-src/Explorer/Menus/NavBar/MeControlComponentAdapter.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponentAdapter.tsx
-src/Explorer/Notebook/NotebookComponent/NotebookComponent.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx
 src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx
-src/Explorer/Notebook/NotebookComponent/contents/file/index.tsx
-src/Explorer/Notebook/NotebookComponent/contents/file/text-file.tsx
 src/Explorer/Notebook/NotebookComponent/contents/index.tsx
-src/Explorer/Notebook/NotebookRenderer/AzureTheme.tsx
 src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
 src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
-src/Explorer/Notebook/NotebookRenderer/Prompt.tsx
-src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx
-src/Explorer/Notebook/NotebookRenderer/StatusBar.test.tsx
-src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx
-src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx
-src/Explorer/Notebook/NotebookRenderer/decorators/CellCreator.tsx
-src/Explorer/Notebook/NotebookRenderer/decorators/CellLabeler.tsx
-src/Explorer/Notebook/NotebookRenderer/decorators/HoverableCell.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
 src/Explorer/Notebook/temp/inputs/connected-editors/codemirror.tsx
-src/Explorer/Notebook/temp/inputs/editor.tsx
-src/Explorer/Notebook/temp/markdown-cell.tsx
-src/Explorer/Notebook/temp/source.tsx
-src/Explorer/Notebook/temp/syntax-highlighter/index.tsx
-src/Explorer/SplashScreen/SplashScreen.tsx
-src/Explorer/Tabs/GalleryTab.tsx
-src/Explorer/Tabs/NotebookViewerTab.tsx
-src/Explorer/Tabs/TerminalTab.tsx
 src/Explorer/Tree/ResourceTreeAdapter.tsx
-src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx
-src/GalleryViewer/Cards/GalleryCardComponent.tsx
-src/GalleryViewer/GalleryViewer.tsx
-src/GalleryViewer/GalleryViewerComponent.tsx
 __mocks__/monaco-editor.ts
-src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx
+src/Explorer/Tree/ResourceTree.tsx
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
    browser: true,
    es6: true,
  },
-  plugins: ["@typescript-eslint", "no-null", "prefer-arrow"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks"],
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  globals: {
    Atomics: "readonly",
@@ -11,6 +11,7 @@ module.exports = {
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
+    project: ["./tsconfig.json", "./tsconfig.test.json"],
    ecmaFeatures: {
      jsx: true,
    },
@@ -20,7 +21,7 @@ module.exports = {
  overrides: [
    {
      files: ["**/*.tsx"],
-      extends: ["plugin:react/recommended"], // TODO: Add react-hooks
+      extends: ["plugin:react/recommended"],
      plugins: ["react"],
    },
    {
@@ -35,6 +36,7 @@ module.exports = {
  rules: {
    "no-console": ["error", { allow: ["error", "warn", "dir"] }],
    curly: "error",
+    "@typescript-eslint/switch-exhaustiveness-check": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-extraneous-class": "error",
    "no-null/no-null": "error",
@@ -42,6 +44,8 @@ module.exports = {
    "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
    eqeqeq: "error",
    "react/display-name": "off",
+    "react-hooks/rules-of-hooks": "warn", // TODO: error
+    "react-hooks/exhaustive-deps": "warn", // TODO: error
    "no-restricted-syntax": [
      "error",
      {
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1 @@
+[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -0,0 +1,9 @@
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,10 +15,10 @@ jobs:
    if: github.ref == 'refs/heads/master'
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: node utils/codeMetrics.js
        env:
@@ -28,10 +28,10 @@ jobs:
    name: "Compile TypeScript"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run compile
      - run: npm run compile:strict
@@ -40,10 +40,10 @@ jobs:
    name: "Check Format"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run format:check
  lint:
@@ -51,10 +51,10 @@ jobs:
    name: "Lint"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run lint
  unittest:
@@ -62,22 +62,21 @@ jobs:
    name: "Unit Tests"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run test
  build:
    runs-on: ubuntu-latest
-    needs: [lint, format, compile, unittest]
    name: "Build"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run build:contracts
      - name: Restore Build Cache
@@ -92,16 +91,25 @@ jobs:
        with:
          name: dist
          path: dist/
+      - name: Upload build to preview blob storage
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
+      - name: Upload preview config to blob storage
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
  endtoendemulator:
    name: "End To End Emulator Tests"
-    needs: [lint, format, compile, unittest]
+    # Temporarily disabled. This test needs to be rewritten in playwright
+    if: false
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - uses: southpolesteve/cosmos-emulator-github-action@v1
      - name: End to End Tests
        run: |
@@ -119,59 +127,23 @@ jobs:
        with:
          name: screenshots
          path: failed-*
-  accessibility:
-    name: "Accessibility | Hosted"
-    needs: [lint, format, compile, unittest]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12.x
-      - name: Accessibility Check
-        run: |
-          # Ubuntu gets mad when webpack runs too many files watchers
-          cat /proc/sys/fs/inotify/max_user_watches
-          sudo sysctl fs.inotify.max_user_watches=524288
-          sudo sysctl -p
-          npm ci
-          npm start &
-          npx wait-on -i 5000 https-get://0.0.0.0:1234/
-          node utils/accesibilityCheck.js
-        shell: bash
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-  endtoendhosted:
-    name: "End to End Tests"
-    needs: [cleanupaccounts]
+  endtoend:
+    name: "E2E"
    runs-on: ubuntu-latest
    env:
      NODE_TLS_REJECT_UNAUTHORIZED: 0
-      PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
-      PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
-      PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
-      PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
-      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT }}
-      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY }}
-      NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
-      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
-      PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
-      MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
-      CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
-      TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
-      DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
    strategy:
+      fail-fast: false
      matrix:
        test-file:
          - ./test/cassandra/container.spec.ts
-          - ./test/mongo/container.spec.ts
-          - ./test/mongo/mongoIndexPolicy.spec.ts
-          - ./test/mongo/openMongoAccount.spec.ts
-          - ./test/notebooks/uploadAndOpenNotebook.spec.ts
-          - ./test/selfServe/selfServeExample.spec.ts
+          - ./test/graph/container.spec.ts
          - ./test/sql/container.spec.ts
+          - ./test/mongo/container.spec.ts
+          - ./test/mongo/container32.spec.ts
+          - ./test/selfServe/selfServeExample.spec.ts
+          - ./test/notebooks/upload.spec.ts
          - ./test/sql/resourceToken.spec.ts
          - ./test/tables/container.spec.ts
    steps:
@@ -182,31 +154,17 @@ jobs:
          node-version: 14.x
      - run: npm ci
      - run: npm start &
-      - run: node utils/cleanupDBs.js
      - run: npm run wait-for-server
      - name: ${{ matrix['test-file'] }}
-        run: npx jest -c ./jest.config.e2e.js --detectOpenHandles ${{ matrix['test-file'] }}
+        run: |
+          # Run tests up to three times
+          for i in $(seq 1 3); do npx jest -c ./jest.config.playwright.js ${{ matrix['test-file'] }} && s=0 && break || s=$? && sleep 1; done; (exit $s)
        shell: bash
      - uses: actions/upload-artifact@v2
        if: failure()
        with:
          name: screenshots
-          path: failed-*
-  cleanupaccounts:
-    name: "Cleanup Test Database Accounts"
-    needs: [lint, format, compile, unittest]
-    runs-on: ubuntu-latest
-    env:
-      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
-      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14.x
-      - run: npm ci
-      - run: node utils/cleanupDBs.js
+          path: screenshots/
  nuget:
    name: Publish Nuget
    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
--- a/.github/workflows/cleanup.yml
+++ b/.github/workflows/cleanup.yml
@@ -0,0 +1,28 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Cleanup End to End Account Resources
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+  schedule:
+    # Once every hour
+    - cron: "0 15 * * *"
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  cleanupaccounts:
+    name: "Cleanup Test Database Accounts"
+    runs-on: ubuntu-latest
+    env:
+      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - run: npm ci
+      - run: node utils/cleanupDBs.js
--- a/.gitignore
+++ b/.gitignore
@@ -14,4 +14,6 @@ Contracts/*
 .DS_Store
 .cache/
 .env
-failure.png
+failure.png
+screenshots/*
+GettingStarted-ignore*.ipynb
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,21 +1,26 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-    "files.exclude": {
-        ".vs": true,
-        ".vscode/**": true,
-        "*.trx": true,
-        "**/.DS_Store": true,
-        "**/.git": true,
-        "**/.hg": true,
-        "**/.svn": true,
-        "built/**": true,
-        "coverage/**": true,
-        "libs/**": true,
-        "node_modules/**": true,
-        "package-lock.json": true,
-        "quickstart/**": true,
-        "test/out/**": true,
-        "workers/libs/**": true
-    },
-    "typescript.tsdk": "node_modules/typescript/lib"
-}
+  "files.exclude": {
+    ".vs": true,
+    ".vscode/**": true,
+    "*.trx": true,
+    "**/.DS_Store": true,
+    "**/.git": true,
+    "**/.hg": true,
+    "**/.svn": true,
+    "built/**": true,
+    "coverage/**": true,
+    "libs/**": true,
+    "node_modules/**": true,
+    "package-lock.json": true,
+    "quickstart/**": true,
+    "test/out/**": true,
+    "workers/libs/**": true
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.organizeImports": true
+  }
+}
--- a/CODING_GUIDELINES.md
+++ b/CODING_GUIDELINES.md
@@ -153,7 +153,7 @@ Cosmos Explorer has been under constant development for over 5 years. As a resul

 ✅ DO

- Use [Puppeteer](https://developers.google.com/web/tools/puppeteer) and [Jest](https://jestjs.io/)
+- Use [Playwright](https://github.com/microsoft/playwright) and [Jest](https://jestjs.io/)
 - Write or modify an existing E2E test that covers the primary use case of any major feature.
  - Use caution. Do not try to cover every case. End to End tests can be slow and brittle.

@@ -188,7 +188,3 @@ Cosmos Explorer has been under constant development for over 5 years. As a resul
 ✅ DO

 - Support all [browsers supported by the Azure Portal](https://docs.microsoft.com/en-us/azure/azure-portal/azure-portal-supported-browsers-devices)
- Support IE11
-  - In practice, this should not need to be considered as part of a normal development workflow
-  - Polyfills and transpilation are already provided by our engineering systems.
-  - This requirement will be removed on March 30th, 2021 when Azure drops IE11 support.
--- a/README.md
+++ b/README.md
@@ -18,7 +18,6 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)

 - Visit: `https://localhost:1234/hostedExplorer.html`
- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
 - The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.

 ### Emulator Development
@@ -69,7 +68,7 @@ Jest and Puppeteer are used for end to end browser based tests and are contained

 We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.

-### Architechture
+### Architecture

 [![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)

--- a/configs/mpac.json
+++ b/configs/mpac.json
@@ -1,3 +1,3 @@
 {
- "JUNO_ENDPOINT": "https://tools-staging.cosmos.azure.com"
-}
+  "JUNO_ENDPOINT": "https://tools-staging.cosmos.azure.com"
+}
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
--- a/docs/assets/images/icons.png
+++ b/docs/assets/images/icons.png
--- a/docs/assets/images/icons@2x.png
+++ b/docs/assets/images/icons@2x.png
--- a/docs/assets/images/widgets.png
+++ b/docs/assets/images/widgets.png
--- a/docs/assets/images/widgets@2x.png
+++ b/docs/assets/images/widgets@2x.png
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
--- a/docs/assets/js/search.js
+++ b/docs/assets/js/search.js
--- a/docs/classes/selfserve_selfservetypes.selfservebaseclass.html
+++ b/docs/classes/selfserve_selfservetypes.selfservebaseclass.html
@@ -0,0 +1,306 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServeBaseClass | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.selfservebaseclass.html">SelfServeBaseClass</a>
+				</li>
+			</ul>
+			<h1>Class SelfServeBaseClass</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>All SelfServe feature classes need to derive from the SelfServeBaseClass</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">SelfServeBaseClass</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Constructors</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="selfserve_selfservetypes.selfservebaseclass.html#constructor" class="tsd-kind-icon">constructor</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-class"><a href="selfserve_selfservetypes.selfservebaseclass.html#initialize" class="tsd-kind-icon">initialize</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-class"><a href="selfserve_selfservetypes.selfservebaseclass.html#onrefresh" class="tsd-kind-icon">on<wbr>Refresh</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-class"><a href="selfserve_selfservetypes.selfservebaseclass.html#onsave" class="tsd-kind-icon">on<wbr>Save</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Constructors</h2>
+				<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
+					<a name="constructor" class="tsd-anchor"></a>
+					<h3>constructor</h3>
+					<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
+						<li class="tsd-signature tsd-kind-icon">new <wbr>Self<wbr>Serve<wbr>Base<wbr>Class<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="selfserve_selfservetypes.selfservebaseclass.html" class="tsd-signature-type" data-tsd-kind="Class">SelfServeBaseClass</a></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<h4 class="tsd-returns-title">Returns <a href="selfserve_selfservetypes.selfservebaseclass.html" class="tsd-signature-type" data-tsd-kind="Class">SelfServeBaseClass</a></h4>
+						</li>
+					</ul>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
+					<a name="initialize" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagAbstract">Abstract</span> initialize</h3>
+					<div class="tsd-signature tsd-kind-icon">initialize<span class="tsd-signature-symbol">:</span> <a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-signature-type" data-tsd-kind="Type alias">initializeCallback</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Sets default values for the properties of the Self Serve Class. Typically, you can make rest calls here
+							to fetch the initial values for the properties. This is also called after the onSave callback, to reinitialize the defaults.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
+					<a name="onrefresh" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagAbstract">Abstract</span> on<wbr>Refresh</h3>
+					<div class="tsd-signature tsd-kind-icon">on<wbr>Refresh<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshResult</a><span class="tsd-signature-symbol">&gt;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Callback that is triggered when the refresh button is clicked. Here, you should perform the your rest API
+							call to check if the update action is completed.</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter-signature">
+								<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-class">
+									<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshResult</a><span class="tsd-signature-symbol">&gt;</span></li>
+								</ul>
+								<ul class="tsd-descriptions">
+									<li class="tsd-description">
+										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshResult</a><span class="tsd-signature-symbol">&gt;</span></h4>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-class">
+					<a name="onsave" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagAbstract">Abstract</span> on<wbr>Save</h3>
+					<div class="tsd-signature tsd-kind-icon">on<wbr>Save<span class="tsd-signature-symbol">:</span> <a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-signature-type" data-tsd-kind="Type alias">onSaveCallback</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Callback that is triggerred when the submit button is clicked. You should perform your rest API
+							calls here using the data from the different inputs passed as a Map to this callback function.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-class tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+						<ul>
+							<li class=" tsd-kind-constructor tsd-parent-kind-class">
+								<a href="selfserve_selfservetypes.selfservebaseclass.html#constructor" class="tsd-kind-icon">constructor</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-class">
+								<a href="selfserve_selfservetypes.selfservebaseclass.html#initialize" class="tsd-kind-icon">initialize</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-class">
+								<a href="selfserve_selfservetypes.selfservebaseclass.html#onrefresh" class="tsd-kind-icon">on<wbr>Refresh</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-class">
+								<a href="selfserve_selfservetypes.selfservebaseclass.html#onsave" class="tsd-kind-icon">on<wbr>Save</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+				<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/enums/selfserve_selfservetypes.descriptiontype.html
+++ b/docs/enums/selfserve_selfservetypes.descriptiontype.html
@@ -0,0 +1,245 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>DescriptionType | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.descriptiontype.html">DescriptionType</a>
+				</li>
+			</ul>
+			<h1>Enumeration DescriptionType</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumeration members</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.descriptiontype.html#infomessagebar" class="tsd-kind-icon">Info<wbr>Message<wbr>Bar</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.descriptiontype.html#text" class="tsd-kind-icon">Text</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.descriptiontype.html#warningmessagebar" class="tsd-kind-icon">Warning<wbr>Message<wbr>Bar</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Enumeration members</h2>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="infomessagebar" class="tsd-anchor"></a>
+					<h3>Info<wbr>Message<wbr>Bar</h3>
+					<div class="tsd-signature tsd-kind-icon">Info<wbr>Message<wbr>Bar<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = 1</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Show the description as a Info Message bar.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="text" class="tsd-anchor"></a>
+					<h3>Text</h3>
+					<div class="tsd-signature tsd-kind-icon">Text<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = 0</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Show the description as a text</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="warningmessagebar" class="tsd-anchor"></a>
+					<h3>Warning<wbr>Message<wbr>Bar</h3>
+					<div class="tsd-signature tsd-kind-icon">Warning<wbr>Message<wbr>Bar<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = 2</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Show the description as a Warning Message bar.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+						<ul>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.descriptiontype.html#infomessagebar" class="tsd-kind-icon">Info<wbr>Message<wbr>Bar</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.descriptiontype.html#text" class="tsd-kind-icon">Text</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.descriptiontype.html#warningmessagebar" class="tsd-kind-icon">Warning<wbr>Message<wbr>Bar</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/enums/selfserve_selfservetypes.numberuitype.html
+++ b/docs/enums/selfserve_selfservetypes.numberuitype.html
@@ -0,0 +1,229 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>NumberUiType | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.numberuitype.html">NumberUiType</a>
+				</li>
+			</ul>
+			<h1>Enumeration NumberUiType</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumeration members</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.numberuitype.html#slider" class="tsd-kind-icon">Slider</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfservetypes.numberuitype.html#spinner" class="tsd-kind-icon">Spinner</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Enumeration members</h2>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="slider" class="tsd-anchor"></a>
+					<h3>Slider</h3>
+					<div class="tsd-signature tsd-kind-icon">Slider<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;Slider&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The numeric input UI element corresponding to the property is a Slider</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="spinner" class="tsd-anchor"></a>
+					<h3>Spinner</h3>
+					<div class="tsd-signature tsd-kind-icon">Spinner<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;Spinner&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The numeric input UI element corresponding to the property is a Spinner</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+						<ul>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.numberuitype.html#slider" class="tsd-kind-icon">Slider</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfservetypes.numberuitype.html#spinner" class="tsd-kind-icon">Spinner</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/enums/selfserve_selfserveutils.bladetype.html
+++ b/docs/enums/selfserve_selfserveutils.bladetype.html
@@ -0,0 +1,264 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>BladeType | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
+				</li>
+				<li>
+					<a href="selfserve_selfserveutils.bladetype.html">BladeType</a>
+				</li>
+			</ul>
+			<h1>Enumeration BladeType</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Portal Blade types</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumeration members</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#cassandrakeys" class="tsd-kind-icon">Cassandra<wbr>Keys</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#gremlinkeys" class="tsd-kind-icon">Gremlin<wbr>Keys</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#metrics" class="tsd-kind-icon">Metrics</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#mongokeys" class="tsd-kind-icon">Mongo<wbr>Keys</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#sqlkeys" class="tsd-kind-icon">Sql<wbr>Keys</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.bladetype.html#tablekeys" class="tsd-kind-icon">Table<wbr>Keys</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Enumeration members</h2>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="cassandrakeys" class="tsd-anchor"></a>
+					<h3>Cassandra<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Cassandra<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;cassandraDbKeys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a Cassandra API account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="gremlinkeys" class="tsd-anchor"></a>
+					<h3>Gremlin<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Gremlin<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;keys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a Gremlin API account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="metrics" class="tsd-anchor"></a>
+					<h3>Metrics</h3>
+					<div class="tsd-signature tsd-kind-icon">Metrics<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;metrics&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Metrics blade of an Azure Cosmos DB account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="mongokeys" class="tsd-anchor"></a>
+					<h3>Mongo<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Mongo<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;mongoDbKeys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a Mongo API account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="sqlkeys" class="tsd-anchor"></a>
+					<h3>Sql<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Sql<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;keys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a SQL API account.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="tablekeys" class="tsd-anchor"></a>
+					<h3>Table<wbr>Keys</h3>
+					<div class="tsd-signature tsd-kind-icon">Table<wbr>Keys<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;tableKeys&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Keys blade of a Table API account.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
+						<ul>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#cassandrakeys" class="tsd-kind-icon">Cassandra<wbr>Keys</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#gremlinkeys" class="tsd-kind-icon">Gremlin<wbr>Keys</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#metrics" class="tsd-kind-icon">Metrics</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#mongokeys" class="tsd-kind-icon">Mongo<wbr>Keys</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#sqlkeys" class="tsd-kind-icon">Sql<wbr>Keys</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.bladetype.html#tablekeys" class="tsd-kind-icon">Table<wbr>Keys</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/enums/selfserve_selfserveutils.selfservetype.html
+++ b/docs/enums/selfserve_selfserveutils.selfservetype.html
@@ -0,0 +1,201 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServeType | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
+				</li>
+				<li>
+					<a href="selfserve_selfserveutils.selfservetype.html">SelfServeType</a>
+				</li>
+			</ul>
+			<h1>Enumeration SelfServeType</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>The type used to identify the Self Serve Class</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumeration members</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.selfservetype.html#example" class="tsd-kind-icon">example</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.selfservetype.html#invalid" class="tsd-kind-icon">invalid</a></li>
+								<li class="tsd-kind-enum-member tsd-parent-kind-enum"><a href="selfserve_selfserveutils.selfservetype.html#sqlx" class="tsd-kind-icon">sqlx</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Enumeration members</h2>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="example" class="tsd-anchor"></a>
+					<h3>example</h3>
+					<div class="tsd-signature tsd-kind-icon">example<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;example&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="invalid" class="tsd-anchor"></a>
+					<h3>invalid</h3>
+					<div class="tsd-signature tsd-kind-icon">invalid<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;invalid&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-enum-member tsd-parent-kind-enum">
+					<a name="sqlx" class="tsd-anchor"></a>
+					<h3>sqlx</h3>
+					<div class="tsd-signature tsd-kind-icon">sqlx<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol"> = &quot;sqlx&quot;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-enum tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
+						<ul>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.selfservetype.html#example" class="tsd-kind-icon">example</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.selfservetype.html#invalid" class="tsd-kind-icon">invalid</a>
+							</li>
+							<li class=" tsd-kind-enum-member tsd-parent-kind-enum">
+								<a href="selfserve_selfserveutils.selfservetype.html#sqlx" class="tsd-kind-icon">sqlx</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/index.html
+++ b/docs/index.html
@@ -0,0 +1,209 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="assets/css/main.css">
+	<script async src="assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<h1>cosmos-explorer</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<div class="tsd-panel tsd-typography">
+				<a href="#cosmos-db-explorer" id="cosmos-db-explorer" style="color: inherit; text-decoration: none;">
+					<h1>Cosmos DB Explorer</h1>
+				</a>
+				<p>UI for Azure Cosmos DB. Powers the <a href="https://portal.azure.com/">Azure Portal</a>, <a href="https://cosmos.azure.com/">https://cosmos.azure.com/</a>, and the <a href="https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator">Cosmos DB Emulator</a></p>
+				<p><img src="https://sdkctlstore.blob.core.windows.net/exe/dataexplorer.gif" alt=""></p>
+				<a href="#getting-started" id="getting-started" style="color: inherit; text-decoration: none;">
+					<h2>Getting Started</h2>
+				</a>
+				<ul>
+					<li><code>npm install</code></li>
+					<li><code>npm run build</code></li>
+				</ul>
+				<a href="#developing" id="developing" style="color: inherit; text-decoration: none;">
+					<h2>Developing</h2>
+				</a>
+				<a href="#watch-mode" id="watch-mode" style="color: inherit; text-decoration: none;">
+					<h3>Watch mode</h3>
+				</a>
+				<p>Run <code>npm start</code> to start the development server and automatically rebuild on changes</p>
+				<a href="#hosted-development-httpscosmosazurecom" id="hosted-development-httpscosmosazurecom" style="color: inherit; text-decoration: none;">
+					<h3>Hosted Development (<a href="https://cosmos.azure.com">https://cosmos.azure.com</a>)</h3>
+				</a>
+				<ul>
+					<li>Visit: <code>https://localhost:1234/hostedExplorer.html</code></li>
+					<li>The default webpack dev server configuration will proxy requests to the production portal backend: <code>https://main.documentdb.ext.azure.com</code>. This will allow you to use production connection strings on your local machine.</li>
+				</ul>
+				<a href="#emulator-development" id="emulator-development" style="color: inherit; text-decoration: none;">
+					<h3>Emulator Development</h3>
+				</a>
+				<ul>
+					<li>Start the Cosmos Emulator</li>
+					<li>Visit: <a href="https://localhost:1234/index.html">https://localhost:1234/index.html</a></li>
+				</ul>
+				<a href="#setting-up-a-remote-emulator" id="setting-up-a-remote-emulator" style="color: inherit; text-decoration: none;">
+					<h4>Setting up a Remote Emulator</h4>
+				</a>
+				<p>The Cosmos emulator currently only runs in Windows environments. You can still develop on a non-Windows machine by setting up an emulator on a windows box and exposing its ports publicly:</p>
+				<ol>
+					<li><p>Expose these ports publicly: 8081, 8900, 8979, 10250, 10251, 10252, 10253, 10254, 10255, 10256</p>
+					</li>
+					<li><p>Download and install the emulator: <a href="https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator">https://docs.microsoft.com/en-us/azure/cosmos-db/local-emulator</a></p>
+					</li>
+					<li><p>Start the emulator from PowerShell:</p>
+					</li>
+				</ol>
+				<pre><code><span style="color: #000000">&gt; </span><span style="color: #001080">cd</span><span style="color: #000000"> C:/</span>
+
+<span style="color: #000000">&gt; .\</span><span style="color: #001080">CosmosDB</span><span style="color: #000000">.</span><span style="color: #001080">Emulator</span><span style="color: #000000">.</span><span style="color: #001080">exe</span><span style="color: #000000"> -</span><span style="color: #001080">AllowNetworkAccess</span><span style="color: #000000"> -</span><span style="color: #001080">Key</span><span style="color: #000000">=</span><span style="color: #A31515">&quot;&lt;EMULATOR MASTER KEY&gt;&quot;</span>
+</code></pre>
+				<a href="#portal-development" id="portal-development" style="color: inherit; text-decoration: none;">
+					<h3>Portal Development</h3>
+				</a>
+				<ul>
+					<li>Visit: <a href="https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html">https://ms.portal.azure.com/?dataExplorerSource=https%3A%2F%2Flocalhost%3A1234%2Fexplorer.html</a></li>
+					<li>You may have to manually visit <a href="https://localhost:1234/explorer.html">https://localhost:1234/explorer.html</a> first and click through any SSL certificate warnings</li>
+				</ul>
+				<a href="#testing" id="testing" style="color: inherit; text-decoration: none;">
+					<h3>Testing</h3>
+				</a>
+				<a href="#unit-tests" id="unit-tests" style="color: inherit; text-decoration: none;">
+					<h4>Unit Tests</h4>
+				</a>
+				<p>Unit tests are located adjacent to the code under test and run with <a href="https://jestjs.io/">Jest</a>:</p>
+				<p><code>npm run test</code></p>
+				<a href="#end-to-end-ci-tests" id="end-to-end-ci-tests" style="color: inherit; text-decoration: none;">
+					<h4>End to End CI Tests</h4>
+				</a>
+				<p>Jest and Puppeteer are used for end to end browser based tests and are contained in <code>test/</code>. To run these tests locally:</p>
+				<ol>
+					<li>Copy .env.example to .env</li>
+					<li>Update the values in .env including your local data explorer endpoint (ask a teammate/codeowner for help with .env values)</li>
+					<li>Make sure all packages are installed <code>npm install</code></li>
+					<li>Run the server <code>npm run start</code> and wait for it to start</li>
+					<li>Run <code>npm run test:e2e</code></li>
+				</ol>
+				<a href="#releasing" id="releasing" style="color: inherit; text-decoration: none;">
+					<h3>Releasing</h3>
+				</a>
+				<p>We generally adhere to the release strategy <a href="https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches">documented by the Azure SDK Guidelines</a>. Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a <code>release/</code> or <code>hotfix/</code> branch. See linked documentation for more details.</p>
+				<a href="#architecture" id="architecture" style="color: inherit; text-decoration: none;">
+					<h3>Architecture</h3>
+				</a>
+				<p><a href="https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0"><img src="https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0" alt=""></a></p>
+				<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
+					<h1>Contributing</h1>
+				</a>
+				<p>Please read the <a href="./CONTRIBUTING.md">contribution guidelines</a>.</p>
+			</div>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_decorators.booleaninputoptions.html
+++ b/docs/interfaces/selfserve_decorators.booleaninputoptions.html
@@ -0,0 +1,255 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>BooleanInputOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.booleaninputoptions.html">BooleanInputOptions</a>
+				</li>
+			</ul>
+			<h1>Interface BooleanInputOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Toggle is rendered.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">InputOptionsBase</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">BooleanInputOptions</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.booleaninputoptions.html#falselabeltkey" class="tsd-kind-icon">false<wbr>LabelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-inherited"><a href="selfserve_decorators.booleaninputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.booleaninputoptions.html#truelabeltkey" class="tsd-kind-icon">true<wbr>LabelTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="falselabeltkey" class="tsd-anchor"></a>
+					<h3>false<wbr>LabelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">false<wbr>LabelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the false label of the toggle, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3>labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+						<p>Inherited from InputOptionsBase.labelTKey</p>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the label of the UI element, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="truelabeltkey" class="tsd-anchor"></a>
+					<h3>true<wbr>LabelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">true<wbr>LabelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the true label of the toggle, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.booleaninputoptions.html#falselabeltkey" class="tsd-kind-icon">false<wbr>LabelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+								<a href="selfserve_decorators.booleaninputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.booleaninputoptions.html#truelabeltkey" class="tsd-kind-icon">true<wbr>LabelTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_decorators.choiceinputoptions.html
+++ b/docs/interfaces/selfserve_decorators.choiceinputoptions.html
@@ -0,0 +1,255 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>ChoiceInputOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.choiceinputoptions.html">ChoiceInputOptions</a>
+				</li>
+			</ul>
+			<h1>Interface ChoiceInputOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Dropdown is rendered.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">InputOptionsBase</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">ChoiceInputOptions</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.choiceinputoptions.html#choices" class="tsd-kind-icon">choices</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-inherited"><a href="selfserve_decorators.choiceinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.choiceinputoptions.html#placeholdertkey" class="tsd-kind-icon">placeholderTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="choices" class="tsd-anchor"></a>
+					<h3>choices</h3>
+					<div class="tsd-signature tsd-kind-icon">choices<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-signature-type" data-tsd-kind="Type alias">ChoiceItem</a><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-signature-type" data-tsd-kind="Type alias">ChoiceItem</a><span class="tsd-signature-symbol">[]</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Choices to be shown in the dropdown</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3>labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+						<p>Inherited from InputOptionsBase.labelTKey</p>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the label of the UI element, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="placeholdertkey" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> placeholderTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">placeholderTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the placeholder text of the dropdown, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.choiceinputoptions.html#choices" class="tsd-kind-icon">choices</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+								<a href="selfserve_decorators.choiceinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.choiceinputoptions.html#placeholdertkey" class="tsd-kind-icon">placeholderTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_decorators.descriptiondisplayoptions.html
+++ b/docs/interfaces/selfserve_decorators.descriptiondisplayoptions.html
@@ -0,0 +1,249 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>DescriptionDisplayOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.descriptiondisplayoptions.html">DescriptionDisplayOptions</a>
+				</li>
+			</ul>
+			<h1>Interface DescriptionDisplayOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Text is rendered.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">DescriptionDisplayOptions</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.descriptiondisplayoptions.html#description" class="tsd-kind-icon">description</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.descriptiondisplayoptions.html#isdynamicdescription" class="tsd-kind-icon">is<wbr>Dynamic<wbr>Description</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.descriptiondisplayoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="description" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> description</h3>
+					<div class="tsd-signature tsd-kind-icon">description<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="selfserve_selfservetypes.description.html" class="tsd-signature-type" data-tsd-kind="Interface">Description</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><a href="selfserve_selfservetypes.description.html" class="tsd-signature-type" data-tsd-kind="Interface">Description</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Static description to be shown as text.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="isdynamicdescription" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> is<wbr>Dynamic<wbr>Description</h3>
+					<div class="tsd-signature tsd-kind-icon">is<wbr>Dynamic<wbr>Description<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>If true, Indicates that the Description will be populated dynamically and that it may not be present in some scenarios.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Optional heading for the text displayed by this description element.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.descriptiondisplayoptions.html#description" class="tsd-kind-icon">description</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.descriptiondisplayoptions.html#isdynamicdescription" class="tsd-kind-icon">is<wbr>Dynamic<wbr>Description</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.descriptiondisplayoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_decorators.numberinputoptions.html
+++ b/docs/interfaces/selfserve_decorators.numberinputoptions.html
@@ -0,0 +1,287 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>NumberInputOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.numberinputoptions.html">NumberInputOptions</a>
+				</li>
+			</ul>
+			<h1>Interface NumberInputOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Numeric input UI element is rendered. The current options are to render it as a slider or a spinner.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">InputOptionsBase</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">NumberInputOptions</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-inherited"><a href="selfserve_decorators.numberinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.numberinputoptions.html#max" class="tsd-kind-icon">max</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.numberinputoptions.html#min" class="tsd-kind-icon">min</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.numberinputoptions.html#step" class="tsd-kind-icon">step</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.numberinputoptions.html#uitype" class="tsd-kind-icon">ui<wbr>Type</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3>labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+						<p>Inherited from InputOptionsBase.labelTKey</p>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the label of the UI element, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="max" class="tsd-anchor"></a>
+					<h3>max</h3>
+					<div class="tsd-signature tsd-kind-icon">max<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Max value of the numeric input UI element</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="min" class="tsd-anchor"></a>
+					<h3>min</h3>
+					<div class="tsd-signature tsd-kind-icon">min<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Min value of the numeric input UI element</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="step" class="tsd-anchor"></a>
+					<h3>step</h3>
+					<div class="tsd-signature tsd-kind-icon">step<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Value by which the numeric input is incremented or decremented in the UI.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="uitype" class="tsd-anchor"></a>
+					<h3>ui<wbr>Type</h3>
+					<div class="tsd-signature tsd-kind-icon">ui<wbr>Type<span class="tsd-signature-symbol">:</span> <a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-signature-type" data-tsd-kind="Enumeration">NumberUiType</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The type of the numeric input UI element</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+								<a href="selfserve_decorators.numberinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.numberinputoptions.html#max" class="tsd-kind-icon">max</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.numberinputoptions.html#min" class="tsd-kind-icon">min</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.numberinputoptions.html#step" class="tsd-kind-icon">step</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.numberinputoptions.html#uitype" class="tsd-kind-icon">ui<wbr>Type</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_decorators.stringinputoptions.html
+++ b/docs/interfaces/selfserve_decorators.stringinputoptions.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>StringInputOptions | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.stringinputoptions.html">StringInputOptions</a>
+				</li>
+			</ul>
+			<h1>Interface StringInputOptions</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Text box is rendered.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">InputOptionsBase</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">StringInputOptions</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface tsd-is-inherited"><a href="selfserve_decorators.stringinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_decorators.stringinputoptions.html#placeholdertkey" class="tsd-kind-icon">placeholderTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+					<a name="labeltkey" class="tsd-anchor"></a>
+					<h3>labelTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">labelTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+						<p>Inherited from InputOptionsBase.labelTKey</p>
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the label of the UI element, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="placeholdertkey" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> placeholderTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">placeholderTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the place holder text of the text box, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface tsd-is-inherited">
+								<a href="selfserve_decorators.stringinputoptions.html#labeltkey" class="tsd-kind-icon">labelTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_decorators.stringinputoptions.html#placeholdertkey" class="tsd-kind-icon">placeholderTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="../modules/selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_selfservetypes.description.html
+++ b/docs/interfaces/selfserve_selfservetypes.description.html
@@ -0,0 +1,277 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Description | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.description.html">Description</a>
+				</li>
+			</ul>
+			<h1>Interface Description</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Data to be shown as a description.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">Description</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.description.html#link" class="tsd-kind-icon">link</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.description.html#texttkey-1" class="tsd-kind-icon">textTKey</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.description.html#type" class="tsd-kind-icon">type</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="link" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> link</h3>
+					<div class="tsd-signature tsd-kind-icon">link<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>href<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>textTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Optional link to be shown as part of the description, after the text.</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter">
+								<h5>href<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>The URL of the link</p>
+									</div>
+								</div>
+							</li>
+							<li class="tsd-parameter">
+								<h5>textTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Key used to pickup the string corresponding to the text of the link, from the strings JSON file.</p>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="texttkey-1" class="tsd-anchor"></a>
+					<h3>textTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">textTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the text to be shown as part of the description, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="type" class="tsd-anchor"></a>
+					<h3>type</h3>
+					<div class="tsd-signature tsd-kind-icon">type<span class="tsd-signature-symbol">:</span> <a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-signature-type" data-tsd-kind="Enumeration">DescriptionType</a></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.description.html#link" class="tsd-kind-icon">link</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.description.html#texttkey-1" class="tsd-kind-icon">textTKey</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.description.html#type" class="tsd-kind-icon">type</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_selfservetypes.info.html
+++ b/docs/interfaces/selfserve_selfservetypes.info.html
@@ -0,0 +1,266 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Info | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.info.html">Info</a>
+				</li>
+			</ul>
+			<h1>Interface Info</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>Data to be shown within the info bubble of the property.</p>
+					</div>
+				</div>
+			</section>
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">Info</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.info.html#link" class="tsd-kind-icon">link</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.info.html#messagetkey" class="tsd-kind-icon">messageTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="link" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> link</h3>
+					<div class="tsd-signature tsd-kind-icon">link<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>href<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>textTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Optional link to be shown within the info bubble, after the text.</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter">
+								<h5>href<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>The URL of the link</p>
+									</div>
+								</div>
+							</li>
+							<li class="tsd-parameter">
+								<h5>textTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Key used to pickup the string corresponding to the text of the link, from the strings JSON file.</p>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="messagetkey" class="tsd-anchor"></a>
+					<h3>messageTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">messageTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the text to be shown within the info bubble, from the strings JSON file.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.info.html#link" class="tsd-kind-icon">link</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.info.html#messagetkey" class="tsd-kind-icon">messageTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_selfservetypes.onsaveresult.html
+++ b/docs/interfaces/selfserve_selfservetypes.onsaveresult.html
@@ -0,0 +1,321 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>OnSaveResult | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.onsaveresult.html">OnSaveResult</a>
+				</li>
+			</ul>
+			<h1>Interface OnSaveResult</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">OnSaveResult</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.onsaveresult.html#operationstatusurl" class="tsd-kind-icon">operation<wbr>Status<wbr>Url</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.onsaveresult.html#portalnotification" class="tsd-kind-icon">portal<wbr>Notification</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="operationstatusurl" class="tsd-anchor"></a>
+					<h3>operation<wbr>Status<wbr>Url</h3>
+					<div class="tsd-signature tsd-kind-icon">operation<wbr>Status<wbr>Url<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The polling url returned by the RP call.</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="portalnotification" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> portal<wbr>Notification</h3>
+					<div class="tsd-signature tsd-kind-icon">portal<wbr>Notification<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>failure<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">; </span>initialize<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol">; </span>success<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span><span class="tsd-signature-symbol"> }</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Notifications that need to be shown on the portal for different stages of a scenario (initialized, success/failure).</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter">
+								<h5>failure<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Notification that need to be shown when the save operation failed.</p>
+									</div>
+								</div>
+								<ul class="tsd-parameters">
+									<li class="tsd-parameter">
+										<h5>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification message, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+									<li class="tsd-parameter">
+										<h5>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification title, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+								</ul>
+							</li>
+							<li class="tsd-parameter">
+								<h5>initialize<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Notification that need to be shown when the save operation has been triggered.</p>
+									</div>
+								</div>
+								<ul class="tsd-parameters">
+									<li class="tsd-parameter">
+										<h5>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification message, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+									<li class="tsd-parameter">
+										<h5>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification title, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+								</ul>
+							</li>
+							<li class="tsd-parameter">
+								<h5>success<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Notification that need to be shown when the save operation has successfully completed.</p>
+									</div>
+								</div>
+								<ul class="tsd-parameters">
+									<li class="tsd-parameter">
+										<h5>messageTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification message, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+									<li class="tsd-parameter">
+										<h5>titleTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+										<div class="tsd-comment tsd-typography">
+											<div class="lead">
+												<p>Key used to pickup the string corresponding to the notification title, from the strings JSON file.</p>
+											</div>
+										</div>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.onsaveresult.html#operationstatusurl" class="tsd-kind-icon">operation<wbr>Status<wbr>Url</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.onsaveresult.html#portalnotification" class="tsd-kind-icon">portal<wbr>Notification</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_selfservetypes.refreshparams.html
+++ b/docs/interfaces/selfserve_selfservetypes.refreshparams.html
@@ -0,0 +1,222 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>RefreshParams | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.refreshparams.html">RefreshParams</a>
+				</li>
+			</ul>
+			<h1>Interface RefreshParams</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">RefreshParams</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.refreshparams.html#retryintervalinms" class="tsd-kind-icon">retry<wbr>Interval<wbr>InMs</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="retryintervalinms" class="tsd-anchor"></a>
+					<h3>retry<wbr>Interval<wbr>InMs</h3>
+					<div class="tsd-signature tsd-kind-icon">retry<wbr>Interval<wbr>InMs<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The time interval between refresh attempts when an update in ongoing</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.refreshparams.html#retryintervalinms" class="tsd-kind-icon">retry<wbr>Interval<wbr>InMs</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_selfservetypes.refreshresult.html
+++ b/docs/interfaces/selfserve_selfservetypes.refreshresult.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>RefreshResult | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.refreshresult.html">RefreshResult</a>
+				</li>
+			</ul>
+			<h1>Interface RefreshResult</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">RefreshResult</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.refreshresult.html#isupdateinprogress" class="tsd-kind-icon">is<wbr>Update<wbr>InProgress</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.refreshresult.html#updateinprogressmessagetkey" class="tsd-kind-icon">update<wbr>InProgress<wbr>MessageTKey</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="isupdateinprogress" class="tsd-anchor"></a>
+					<h3>is<wbr>Update<wbr>InProgress</h3>
+					<div class="tsd-signature tsd-kind-icon">is<wbr>Update<wbr>InProgress<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Indicate if the update is still ongoing</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="updateinprogressmessagetkey" class="tsd-anchor"></a>
+					<h3>update<wbr>InProgress<wbr>MessageTKey</h3>
+					<div class="tsd-signature tsd-kind-icon">update<wbr>InProgress<wbr>MessageTKey<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Key used to pickup the string corresponding to the message that will be shown on the UI if the update is still ongoing, from the strings JSON file.
+							Will be shown only if <a href="selfserve_selfservetypes.refreshresult.html#isupdateinprogress"><code>isUpdateInProgress</code></a> is true.</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.refreshresult.html#isupdateinprogress" class="tsd-kind-icon">is<wbr>Update<wbr>InProgress</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.refreshresult.html#updateinprogressmessagetkey" class="tsd-kind-icon">update<wbr>InProgress<wbr>MessageTKey</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html
+++ b/docs/interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html
@@ -0,0 +1,227 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServeTelemetryMessage | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.selfservetelemetrymessage.html">SelfServeTelemetryMessage</a>
+				</li>
+			</ul>
+			<h1>Interface SelfServeTelemetryMessage</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="tsd-signature-type">TelemetryData</span>
+						<ul class="tsd-hierarchy">
+							<li>
+								<span class="target">SelfServeTelemetryMessage</span>
+							</li>
+						</ul>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.selfservetelemetrymessage.html#selfserveclassname" class="tsd-kind-icon">self<wbr>Serve<wbr>Class<wbr>Name</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="selfserveclassname" class="tsd-anchor"></a>
+					<h3>self<wbr>Serve<wbr>Class<wbr>Name</h3>
+					<div class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Class<wbr>Name<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The className used to identify a SelfServe telemetry record</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.selfservetelemetrymessage.html#selfserveclassname" class="tsd-kind-icon">self<wbr>Serve<wbr>Class<wbr>Name</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/interfaces/selfserve_selfservetypes.smartuiinput.html
+++ b/docs/interfaces/selfserve_selfservetypes.smartuiinput.html
@@ -0,0 +1,254 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SmartUiInput | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="../modules/selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.smartuiinput.html">SmartUiInput</a>
+				</li>
+			</ul>
+			<h1>Interface SmartUiInput</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-hierarchy">
+				<h3>Hierarchy</h3>
+				<ul class="tsd-hierarchy">
+					<li>
+						<span class="target">SmartUiInput</span>
+					</li>
+				</ul>
+			</section>
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Properties</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.smartuiinput.html#disabled" class="tsd-kind-icon">disabled</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.smartuiinput.html#hidden" class="tsd-kind-icon">hidden</a></li>
+								<li class="tsd-kind-property tsd-parent-kind-interface"><a href="selfserve_selfservetypes.smartuiinput.html#value" class="tsd-kind-icon">value</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Properties</h2>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="disabled" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> disabled</h3>
+					<div class="tsd-signature tsd-kind-icon">disabled<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Indicates whether the UI element corresponding to the property is disabled</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="hidden" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagOptional">Optional</span> hidden</h3>
+					<div class="tsd-signature tsd-kind-icon">hidden<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">boolean</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Indicates whether the UI element corresponding to the property is hidden</p>
+						</div>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface">
+					<a name="value" class="tsd-anchor"></a>
+					<h3>value</h3>
+					<div class="tsd-signature tsd-kind-icon">value<span class="tsd-signature-symbol">:</span> <a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-signature-type" data-tsd-kind="Type alias">InputType</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>The value to be set for the UI element corresponding to the property</p>
+						</div>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="../modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+				</ul>
+				<ul class="current">
+					<li class="current tsd-kind-interface tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+						<ul>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.smartuiinput.html#disabled" class="tsd-kind-icon">disabled</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.smartuiinput.html#hidden" class="tsd-kind-icon">hidden</a>
+							</li>
+							<li class=" tsd-kind-property tsd-parent-kind-interface">
+								<a href="selfserve_selfservetypes.smartuiinput.html#value" class="tsd-kind-icon">value</a>
+							</li>
+						</ul>
+					</li>
+				</ul>
+				<ul class="after-current">
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="../modules/selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/modules.html
+++ b/docs/modules.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="assets/css/main.css">
+	<script async src="assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="assets/js/search.json" data-base=".">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<h1>cosmos-explorer</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Modules</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-module"><a href="modules/selfserve.html" class="tsd-kind-icon">Self<wbr>Serve</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve___what_is_currently_supported_.html" class="tsd-kind-icon">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve_decorators.html" class="tsd-kind-icon">Self<wbr>Serve/<wbr>Decorators</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve_selfservetelemetryprocessor.html" class="tsd-kind-icon">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve_selfservetypes.html" class="tsd-kind-icon">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a></li>
+								<li class="tsd-kind-module"><a href="modules/selfserve_selfserveutils.html" class="tsd-kind-icon">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class="current ">
+						<a href="modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="modules/selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/modules/selfserve.html
+++ b/docs/modules/selfserve.html
@@ -0,0 +1,498 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve.html">SelfServe</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<a href="#self-serve-model" id="self-serve-model" style="color: inherit; text-decoration: none;">
+							<h1>Self Serve Model</h1>
+						</a>
+						<p>The Self Serve Model allows you to write classes that auto generate UI components for your feature. The idea is to allow developers from other feature teams, who may not be familiar with writing UI, to develop and own UX components. This is accomplished by just writing simpler TypeScript classes for their features. </p>
+						<p>What this means for the feature team </p>
+						<ul>
+							<li>Can concentrate just on the logic behind showing, hiding and disabling UI components </li>
+							<li>Need not worry about specifics of the UI language or UX requirements (Accessibility, Localization, Themes, etc.)</li>
+							<li>Can own the REST API calls made as part of the feature, which can change in the future</li>
+							<li>Quicker turn around time for development and bug fixes since they have deeper knowledge of the feature</li>
+						</ul>
+						<p>What this means for the UI team</p>
+						<ul>
+							<li>No need to ramp up on the intricacies of every feature which requires UI changes</li>
+							<li>Own only the framework and not every feature, giving more bandwidth to prioritize inhouse features as well</li>
+						</ul>
+						<a href="#getting-started" id="getting-started" style="color: inherit; text-decoration: none;">
+							<h2>Getting Started</h2>
+						</a>
+						<p>Clone the cosmos-explorer repo and run</p>
+						<ul>
+							<li><code>npm install</code></li>
+							<li><code>npm run build</code></li>
+						</ul>
+						<p><a href="../index.html">Click here</a> for more info on setting up the cosmos-explorer repo.</p>
+						<a href="#code-changes" id="code-changes" style="color: inherit; text-decoration: none;">
+							<h2>Code Changes</h2>
+						</a>
+						<p>Code changes need to be made only in the following files</p>
+						<ul>
+							<li>A JSON file - for strings to be displayed</li>
+							<li>A Types File - for defining the data models</li>
+							<li>A RP file - for defining the REST calls</li>
+							<li>A Class file - for defining the UI</li>
+							<li><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/SelfServeUtils.tsx">SelfServeUtils.tsx</a> and <a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/SelfServe.tsx">SelfServe.tsx</a> - for defning the entrypoint for the UI</li>
+						</ul>
+						<a href="#1-json-file-for-ui-strings" id="1-json-file-for-ui-strings" style="color: inherit; text-decoration: none;">
+							<h3>1. JSON file for UI strings</h3>
+						</a>
+						<a href="#naming-convention" id="naming-convention" style="color: inherit; text-decoration: none;">
+							<h4>Naming Convention</h4>
+						</a>
+						<p><code>Localization/en/&lt;FEATURE_NAME&gt;.json</code><br>Please place your files only under &quot;Localization/en&quot; folder. If not, the UI strings will not be picked up by the framework.</p>
+						<a href="#example" id="example" style="color: inherit; text-decoration: none;">
+							<h4>Example</h4>
+						</a>
+						<p><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/Localization/en/SelfServeExample.json">SelfServeExample.json</a></p>
+						<a href="#description" id="description" style="color: inherit; text-decoration: none;">
+							<h4>Description</h4>
+						</a>
+						<p>This is a JSON file where the values are the strings that needs to be displayed in the UI. These strings are referenced using their corresponding unique keys.</p>
+						<p>For example, If your class file defines properties as follows</p>
+						<pre><code class="language-ts"><span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">({</span>
+<span style="color: #000000">    </span><span style="color: #001080">labelTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;stringPropertylabel&quot;</span>
+<span style="color: #000000">  })</span>
+<span style="color: #000000">  stringProperty: </span><span style="color: #001080">string</span><span style="color: #000000">;</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">({</span>
+<span style="color: #000000">    </span><span style="color: #001080">labelTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;booleanPropertyLabel&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">trueLabelTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;trueLabel&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">falseLabelTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;falseLabel&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">  })</span>
+<span style="color: #000000">  booleanProperty: </span><span style="color: #001080">boolean</span><span style="color: #000000">;</span>
+</code></pre>
+						<p>Then the content of <code>Localization/en/FeatureName.json</code> should be </p>
+						<pre><code class="language-json"><span style="color: #000000">{</span>
+<span style="color: #000000">    </span><span style="color: #CD3131">stringPropertyLabel</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;string property&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #CD3131">booleanPropertyLabel</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;boolean property&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #CD3131">trueLabel</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;Enable&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #CD3131">falseLabel</span><span style="color: #000000">: </span><span style="color: #A31515">&quot;Disable&quot;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<p>You can learn more on how to define the class file <a href="./selfserve.html#4-class-file">here</a>.</p>
+						<a href="#2-types-file" id="2-types-file" style="color: inherit; text-decoration: none;">
+							<h3>2. Types file</h3>
+						</a>
+						<a href="#naming-convention-1" id="naming-convention-1" style="color: inherit; text-decoration: none;">
+							<h4>Naming Convention</h4>
+						</a>
+						<p><code>&lt;FEATURE_NAME&gt;.types.ts</code></p>
+						<a href="#example-1" id="example-1" style="color: inherit; text-decoration: none;">
+							<h4>Example</h4>
+						</a>
+						<p><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/Example/SelfServeExample.types.ts">SelfServeExample.types.ts</a></p>
+						<a href="#description-1" id="description-1" style="color: inherit; text-decoration: none;">
+							<h4>Description</h4>
+						</a>
+						<p>This file contains the definitions of all the data models to be used in your Class file and RP file.</p>
+						<p>For example, if your RP call takes/returns the <code>stringProperty</code> and <code>booleanProperty</code> of your SelfServe class, then you can define an interface in your <code>FeatureName.types.ts</code> file like this.</p>
+						<pre><code class="language-ts"><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #001080">RpDataModel</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #001080">stringProperty</span><span style="color: #000000">: </span><span style="color: #001080">string</span><span style="color: #000000">,</span>
+<span style="color: #000000">  </span><span style="color: #001080">booleanProperty</span><span style="color: #000000">: </span><span style="color: #001080">boolean</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#3-rp-file" id="3-rp-file" style="color: inherit; text-decoration: none;">
+							<h3>3. RP file</h3>
+						</a>
+						<a href="#naming-convention-2" id="naming-convention-2" style="color: inherit; text-decoration: none;">
+							<h4>Naming Convention</h4>
+						</a>
+						<p><code>&lt;FEATURE_NAME&gt;.rp.ts</code></p>
+						<a href="#example-2" id="example-2" style="color: inherit; text-decoration: none;">
+							<h4>Example</h4>
+						</a>
+						<p><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/Example/SelfServeExample.rp.ts">SelfServeExample.rp.ts</a></p>
+						<a href="#description-2" id="description-2" style="color: inherit; text-decoration: none;">
+							<h4>Description</h4>
+						</a>
+						<p>The RP file will host the REST calls needed for the initialize, save and refresh functions. This decouples the view and the model of the feature.</p>
+						<p>To make the ARM call, we need some information about the Azure Cosmos DB databaseAccount - the subscription id, resource group name and database account name. These are readily available through the <code>userContext</code> object, exposed through</p>
+						<ul>
+							<li><code>userContext.subscriptionId</code></li>
+							<li><code>userContext.resourceGroup</code></li>
+							<li><code>userContext.databaseAccount.name</code></li>
+						</ul>
+						<p>You can use the <code>armRequestWithoutPolling</code> function to make the ARM api call.</p>
+						<p>Your <code>FeatureName.rp.ts</code> file can look like the following.</p>
+						<pre><code class="language-ts"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">userContext</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;../../UserContext&quot;</span><span style="color: #000000">;</span>
+<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">armRequestWithoutPolling</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;../../Utils/arm/request&quot;</span><span style="color: #000000">;</span>
+<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">configContext</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;../../ConfigContext&quot;</span><span style="color: #000000">;</span>
+
+<span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">apiVersion</span><span style="color: #000000"> = </span><span style="color: #A31515">&quot;2020-06-01-preview&quot;</span><span style="color: #000000">;</span>
+
+<span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">saveData</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span><span style="color: #001080">properties</span><span style="color: #000000">: </span><span style="color: #267F99">RpDataModel</span><span style="color: #000000">): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">path</span><span style="color: #000000"> = </span><span style="color: #A31515">`/subscriptions/</span><span style="color: #0000FF">${</span><span style="color: #001080">userContext</span><span style="color: #000000FF">.</span><span style="color: #001080">subscriptionId</span><span style="color: #0000FF">}</span><span style="color: #A31515">/resourceGroups/</span><span style="color: #0000FF">${</span><span style="color: #001080">userContext</span><span style="color: #000000FF">.</span><span style="color: #001080">resourceGroup</span><span style="color: #0000FF">}</span><span style="color: #A31515">/providers/Microsoft.DocumentDB/databaseAccounts/</span><span style="color: #0000FF">${</span><span style="color: #001080">userContext</span><span style="color: #000000FF">.</span><span style="color: #001080">databaseAccount</span><span style="color: #000000FF">.</span><span style="color: #001080">name</span><span style="color: #0000FF">}</span><span style="color: #A31515">/&lt;REST_OF_THE_PATH&gt;`</span>
+<span style="color: #000000">  </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">body</span><span style="color: #000000"> = {</span>
+<span style="color: #000000">      </span><span style="color: #001080">data :</span><span style="color: #000000"> </span><span style="color: #001080">properties</span>
+<span style="color: #000000">  }</span>
+<span style="color: #000000">  </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">armRequestResult</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">armRequestWithoutPolling</span><span style="color: #000000">({</span>
+<span style="color: #000000">    </span><span style="color: #001080">host:</span><span style="color: #000000"> </span><span style="color: #001080">configContext</span><span style="color: #000000">.</span><span style="color: #0070C1">ARM_ENDPOINT</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">path</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">method:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;PUT&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">apiVersion</span><span style="color: #000000">,</span>
+<span style="color: #000000">    </span><span style="color: #001080">body</span><span style="color: #000000">,</span>
+<span style="color: #000000">  });</span>
+
+<span style="color: #000000">  </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">armRequestResult</span><span style="color: #000000">.</span><span style="color: #001080">operationStatusUrl</span><span style="color: #000000">;</span>
+<span style="color: #000000">};</span>
+
+</code></pre>
+						<a href="#4-class-file" id="4-class-file" style="color: inherit; text-decoration: none;">
+							<h3>4. Class file</h3>
+						</a>
+						<a href="#naming-convention-3" id="naming-convention-3" style="color: inherit; text-decoration: none;">
+							<h4>Naming Convention</h4>
+						</a>
+						<p><code>&lt;FEATURE_NAME&gt;.tsx</code></p>
+						<a href="#example-3" id="example-3" style="color: inherit; text-decoration: none;">
+							<h4>Example</h4>
+						</a>
+						<p><a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/Example/SelfServeExample.tsx">SelfServeExample.tsx</a></p>
+						<a href="#description-3" id="description-3" style="color: inherit; text-decoration: none;">
+							<h4>Description</h4>
+						</a>
+						<p>This file will contain the actual code that is translated into the UI component by the Self Serve framework.</p>
+						<ul>
+							<li><p>Each Self Serve class</p>
+								<ul>
+									<li>Needs to extends the <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html">SelfServeBase</a> class.</li>
+									<li>Needs to have the <a href="./selfserve_decorators.html#isdisplayable">@IsDisplayable()</a> decorator to tell the compiler that UI needs to be generated from this class.</li>
+									<li>Needs to define an <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#initialize">initialize()</a> function, to set default values for the inputs.</li>
+									<li>Needs to define an <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#onsave">onSave()</a> function, a callback for when the save button is clicked.</li>
+									<li>Needs to define an <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#onrefresh">onRefresh()</a> function, a callback for when the refresh button is clicked.</li>
+									<li>Can have an optional <a href="./selfserve_decorators.html#refreshoptions">@RefreshOptions()</a> decorator that determines how often the auto refresh of the UI component should take place.</li>
+								</ul>
+							</li>
+							<li><p>For every UI element needed, add a property to the Self Serve class. Each of these properties</p>
+								<ul>
+									<li>Needs to have a <a href="./selfserve_decorators.html#values">@Values()</a> decorator.</li>
+									<li>Can have an optional <a href="./selfserve_decorators.html#propertyinfo">@PropertyInfo()</a> decorator that describes it&#39;s info bubble.</li>
+									<li>Can have an optional <a href="./selfserve_decorators.html#onchange">@OnChange()</a> decorator that dictates the effects of the change of the UI element tied to this property.</li>
+								</ul>
+							</li>
+						</ul>
+						<p>Your <code>FeatureName.tsx</code> file will look like the following.</p>
+						<pre><code class="language-ts"><span style="color: #000000">@</span><span style="color: #795E26">IsDisplayable</span><span style="color: #000000">()</span>
+<span style="color: #000000">@</span><span style="color: #795E26">RefreshOptions</span><span style="color: #000000">({ </span><span style="color: #001080">retryIntervalInMs:</span><span style="color: #000000"> </span><span style="color: #098658">2000</span><span style="color: #000000"> })</span>
+<span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #AF00DB">default</span><span style="color: #000000"> </span><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #267F99">FeatureName</span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #267F99">SelfServeBaseClass</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">initialize</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">      </span><span style="color: #008000">// initialize RP call and processing logic</span>
+<span style="color: #000000">  }</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">onSave</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span>
+<span style="color: #000000">    </span><span style="color: #001080">currentValues</span><span style="color: #000000">: </span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;,</span>
+<span style="color: #000000">    </span><span style="color: #001080">baselineValues</span><span style="color: #000000">: </span><span style="color: #267F99">ReadonlyMap</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;</span>
+<span style="color: #000000">  ): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">OnSaveResult</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">      </span><span style="color: #008000">// onSave RP call and processing logic</span>
+<span style="color: #000000">  }</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">onRefresh</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">RefreshResult</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">      </span><span style="color: #008000">// refresh RP call and processing logic</span>
+<span style="color: #000000">  };</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">stringProperty</span><span style="color: #000000">: </span><span style="color: #267F99">string</span><span style="color: #000000">;</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">OnChange</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  @</span><span style="color: #795E26">PropertyInfo</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">booleanProperty</span><span style="color: #000000">: </span><span style="color: #267F99">boolean</span><span style="color: #000000">;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#5-update-selfservetype" id="5-update-selfservetype" style="color: inherit; text-decoration: none;">
+							<h3>5. Update SelfServeType</h3>
+						</a>
+						<p>Once you have written your Self Serve Class, add a corresponding type to <a href="../enums/selfserve_selfserveutils.selfservetype.html">SelfServeType</a></p>
+						<pre><code class="language-ts"><span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #0000FF">enum</span><span style="color: #000000"> </span><span style="color: #267F99">SelfServeType</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #0070C1">invalid</span><span style="color: #000000"> = </span><span style="color: #A31515">&quot;invalid&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">  </span><span style="color: #0070C1">example</span><span style="color: #000000"> = </span><span style="color: #A31515">&quot;example&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">  ...</span>
+<span style="color: #000000">  </span><span style="color: #008000">// Add the type for your new feature</span>
+<span style="color: #000000">  </span><span style="color: #0070C1">featureName</span><span style="color: #000000"> = </span><span style="color: #A31515">&quot;featurename&quot;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#6-update-selfservetsx-landing-page" id="6-update-selfservetsx-landing-page" style="color: inherit; text-decoration: none;">
+							<h3>6. Update SelfServe.tsx (landing page)</h3>
+						</a>
+						<p>Once the SelfServeType has been updated, update <a href="https://github.com/Azure/cosmos-explorer/blob/master/src/SelfServe/SelfServe.tsx">SelfServe.tsx</a> for your feature. This ensures that the framework picks up your SelfServe Class.</p>
+						<pre><code class="language-ts"><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #795E26">getDescriptor</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span><span style="color: #001080">selfServeType</span><span style="color: #000000">: </span><span style="color: #267F99">SelfServeType</span><span style="color: #000000">): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">SelfServeDescriptor</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+<span style="color: #000000">  </span><span style="color: #AF00DB">switch</span><span style="color: #000000"> (</span><span style="color: #001080">selfServeType</span><span style="color: #000000">) {</span>
+<span style="color: #000000">    </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #001080">SelfServeType</span><span style="color: #000000">.</span><span style="color: #001080">example</span><span style="color: #000000">: {</span>
+<span style="color: #000000">        ....</span>
+<span style="color: #000000">    }</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    </span><span style="color: #008000">// Add this for your new feature</span>
+<span style="color: #000000">    </span><span style="color: #AF00DB">case</span><span style="color: #000000"> </span><span style="color: #001080">SelfServeType</span><span style="color: #000000">.</span><span style="color: #001080">featureName</span><span style="color: #000000">: {</span>
+<span style="color: #000000">      </span><span style="color: #008000">// The &#039;webpackChunkName&#039; is used during debugging, to identify if the correct class has been loaded</span>
+<span style="color: #000000">      </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">FeatureName</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">import</span><span style="color: #000000">(</span><span style="color: #008000">/* webpackChunkName: &quot;FeatureName&quot; */</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;./FeatureName/FeatureName&quot;</span><span style="color: #000000">);</span>
+<span style="color: #000000">      </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">featureName</span><span style="color: #000000"> = </span><span style="color: #0000FF">new</span><span style="color: #000000"> </span><span style="color: #001080">FeatureName</span><span style="color: #000000">.</span><span style="color: #795E26">default</span><span style="color: #000000">();</span>
+<span style="color: #000000">      </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">loadTranslations</span><span style="color: #000000">(</span><span style="color: #001080">featureName</span><span style="color: #000000">.</span><span style="color: #001080">constructor</span><span style="color: #000000">.</span><span style="color: #001080">name</span><span style="color: #000000">);</span>
+<span style="color: #000000">      </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #001080">featureName</span><span style="color: #000000">.</span><span style="color: #795E26">toSelfServeDescriptor</span><span style="color: #000000">();</span>
+<span style="color: #000000">    }</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    ...</span>
+<span style="color: #000000">    </span><span style="color: #AF00DB">default</span><span style="color: #000000">:</span>
+<span style="color: #000000">      </span><span style="color: #AF00DB">return</span><span style="color: #000000"> </span><span style="color: #0000FF">undefined</span><span style="color: #000000">;</span>
+<span style="color: #000000">  }</span>
+<span style="color: #000000">};</span>
+
+</code></pre>
+						<a href="#telemetry" id="telemetry" style="color: inherit; text-decoration: none;">
+							<h2>Telemetry</h2>
+						</a>
+						<p>You can add telemetry for your feature using the functions in <a href="./selfserve_selfservetelemetryprocessor.html">SelfServeTelemetryProcessor</a></p>
+						<p>For example, in your SelfServe class, you can call the trace method in your <code>onSave</code> function.</p>
+						<pre><code class="language-ts"><span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">saveData</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;./FeatureName.rp&quot;</span>
+<span style="color: #AF00DB">import</span><span style="color: #000000"> { </span><span style="color: #001080">RpDataModel</span><span style="color: #000000"> } </span><span style="color: #AF00DB">from</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;./FeatureName.types&quot;</span>
+
+<span style="color: #000000">@</span><span style="color: #795E26">IsDisplayable</span><span style="color: #000000">()</span>
+<span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #AF00DB">default</span><span style="color: #000000"> </span><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #267F99">FeatureName</span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #267F99">SelfServeBaseClass</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">onSave</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span>
+<span style="color: #000000">    </span><span style="color: #001080">currentValues</span><span style="color: #000000">: </span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;,</span>
+<span style="color: #000000">    </span><span style="color: #001080">baselineValues</span><span style="color: #000000">: </span><span style="color: #267F99">ReadonlyMap</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;</span>
+<span style="color: #000000">  ): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">OnSaveResult</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">    </span><span style="color: #001080">stringPropertyValue</span><span style="color: #000000"> = </span><span style="color: #001080">currentValues</span><span style="color: #000000">.</span><span style="color: #795E26">get</span><span style="color: #000000">(</span><span style="color: #A31515">&quot;stringProperty&quot;</span><span style="color: #000000">)</span>
+<span style="color: #000000">    </span><span style="color: #001080">booleanPropertyValue</span><span style="color: #000000"> = </span><span style="color: #001080">currentValues</span><span style="color: #000000">.</span><span style="color: #795E26">get</span><span style="color: #000000">(</span><span style="color: #A31515">&quot;booleanProperty&quot;</span><span style="color: #000000">)</span>
+<span style="color: #000000">    </span>
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">propertiesToSave</span><span style="color: #000000"> : </span><span style="color: #267F99">RpDataModel</span><span style="color: #000000"> = { </span>
+<span style="color: #000000">      </span><span style="color: #001080">stringProperty:</span><span style="color: #000000"> </span><span style="color: #001080">stringPropertyValue</span><span style="color: #000000">,</span>
+<span style="color: #000000">      </span><span style="color: #001080">booleanProperty:</span><span style="color: #000000"> </span><span style="color: #001080">booleanPropertyValue</span>
+<span style="color: #000000">    }</span>
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">telemetryData</span><span style="color: #000000"> = { ...</span><span style="color: #001080">propertiesToSave</span><span style="color: #000000">, </span><span style="color: #001080">selfServeClassName:</span><span style="color: #000000"> </span><span style="color: #001080">FeatureName</span><span style="color: #000000">.</span><span style="color: #001080">name</span><span style="color: #000000"> }</span>
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">onSaveTimeStamp</span><span style="color: #000000"> = </span><span style="color: #795E26">selfServeTraceStart</span><span style="color: #000000">(</span><span style="color: #001080">telemetryData</span><span style="color: #000000">)</span>
+
+<span style="color: #000000">    </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">saveData</span><span style="color: #000000">(</span><span style="color: #001080">propertiesToSave</span><span style="color: #000000">)</span>
+
+<span style="color: #000000">    </span><span style="color: #795E26">selfServeTraceSuccess</span><span style="color: #000000">(</span><span style="color: #001080">telemetryData</span><span style="color: #000000">, </span><span style="color: #001080">onSaveTimeStamp</span><span style="color: #000000">)</span>
+
+<span style="color: #000000">    </span><span style="color: #008000">// return required values</span>
+<span style="color: #000000">  }</span>
+
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">stringProperty</span><span style="color: #000000">: </span><span style="color: #267F99">string</span><span style="color: #000000">;</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">booleanProperty</span><span style="color: #000000">: </span><span style="color: #267F99">boolean</span><span style="color: #000000">;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#portal-notifications" id="portal-notifications" style="color: inherit; text-decoration: none;">
+							<h2>Portal Notifications</h2>
+						</a>
+						<p>You can enable portal notifications for your feature by passing in the required strings as part of the <a href="../interfaces/selfserve_selfservetypes.onsaveresult.html#portalnotification">portalNotification</a> property of the <a href="../interfaces/selfserve_selfservetypes.onsaveresult.html">onSaveResult</a>.</p>
+						<pre><code class="language-ts"><span style="color: #000000">@</span><span style="color: #795E26">IsDisplayable</span><span style="color: #000000">()</span>
+<span style="color: #AF00DB">export</span><span style="color: #000000"> </span><span style="color: #AF00DB">default</span><span style="color: #000000"> </span><span style="color: #0000FF">class</span><span style="color: #000000"> </span><span style="color: #267F99">SqlX</span><span style="color: #000000"> </span><span style="color: #0000FF">extends</span><span style="color: #000000"> </span><span style="color: #267F99">SelfServeBaseClass</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">.</span>
+<span style="color: #000000">.</span>
+<span style="color: #000000">.</span>
+
+<span style="color: #000000">  </span><span style="color: #0000FF">public</span><span style="color: #000000"> </span><span style="color: #795E26">onSave</span><span style="color: #000000"> = </span><span style="color: #0000FF">async</span><span style="color: #000000"> (</span>
+<span style="color: #000000">      </span><span style="color: #001080">currentValues</span><span style="color: #000000">: </span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;,</span>
+<span style="color: #000000">      </span><span style="color: #001080">baselineValues</span><span style="color: #000000">: </span><span style="color: #267F99">Map</span><span style="color: #000000">&lt;</span><span style="color: #267F99">string</span><span style="color: #000000">, </span><span style="color: #267F99">SmartUiInput</span><span style="color: #000000">&gt;</span>
+<span style="color: #000000">  ): </span><span style="color: #267F99">Promise</span><span style="color: #000000">&lt;</span><span style="color: #267F99">OnSaveResult</span><span style="color: #000000">&gt; </span><span style="color: #0000FF">=&gt;</span><span style="color: #000000"> {</span>
+
+<span style="color: #000000">    </span><span style="color: #001080">stringPropertyValue</span><span style="color: #000000"> = </span><span style="color: #001080">currentValues</span><span style="color: #000000">.</span><span style="color: #795E26">get</span><span style="color: #000000">(</span><span style="color: #A31515">&quot;stringProperty&quot;</span><span style="color: #000000">)</span>
+<span style="color: #000000">    </span><span style="color: #001080">booleanPropertyValue</span><span style="color: #000000"> = </span><span style="color: #001080">currentValues</span><span style="color: #000000">.</span><span style="color: #795E26">get</span><span style="color: #000000">(</span><span style="color: #A31515">&quot;booleanProperty&quot;</span><span style="color: #000000">)</span>
+<span style="color: #000000">    </span>
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">propertiesToSave</span><span style="color: #000000"> : </span><span style="color: #267F99">RpDataModel</span><span style="color: #000000"> = { </span>
+<span style="color: #000000">      </span><span style="color: #001080">stringProperty:</span><span style="color: #000000"> </span><span style="color: #001080">stringPropertyValue</span><span style="color: #000000">,</span>
+<span style="color: #000000">      </span><span style="color: #001080">booleanProperty:</span><span style="color: #000000"> </span><span style="color: #001080">booleanPropertyValue</span>
+<span style="color: #000000">    }</span>
+
+<span style="color: #000000">    </span><span style="color: #0000FF">const</span><span style="color: #000000"> </span><span style="color: #0070C1">operationStatusUrl</span><span style="color: #000000"> = </span><span style="color: #AF00DB">await</span><span style="color: #000000"> </span><span style="color: #795E26">saveData</span><span style="color: #000000">(</span><span style="color: #001080">propertiesToSave</span><span style="color: #000000">);</span>
+<span style="color: #000000">    </span><span style="color: #AF00DB">return</span><span style="color: #000000"> {</span>
+<span style="color: #000000">      </span><span style="color: #001080">operationStatusUrl:</span><span style="color: #000000"> </span><span style="color: #001080">operationStatusUrl</span><span style="color: #000000">,</span>
+<span style="color: #000000">      </span><span style="color: #001080">portalNotification:</span><span style="color: #000000"> {</span>
+<span style="color: #000000">        </span><span style="color: #001080">initialize:</span><span style="color: #000000"> {</span>
+<span style="color: #000000">          </span><span style="color: #001080">titleTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteInitializeTitle&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">          </span><span style="color: #001080">messageTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteInitializeMessage&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">        },</span>
+<span style="color: #000000">        </span><span style="color: #001080">success:</span><span style="color: #000000"> {</span>
+<span style="color: #000000">          </span><span style="color: #001080">titleTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteSuccessTitle&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">          </span><span style="color: #001080">messageTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteSuccesseMessage&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">        },</span>
+<span style="color: #000000">        </span><span style="color: #001080">failure:</span><span style="color: #000000"> {</span>
+<span style="color: #000000">          </span><span style="color: #001080">titleTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteFailureTitle&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">          </span><span style="color: #001080">messageTKey:</span><span style="color: #000000"> </span><span style="color: #A31515">&quot;DeleteFailureMessage&quot;</span><span style="color: #000000">,</span>
+<span style="color: #000000">        },</span>
+<span style="color: #000000">      },</span>
+<span style="color: #000000">    };</span>
+<span style="color: #000000">  }</span>
+
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+<span style="color: #000000">  .</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">stringProperty</span><span style="color: #000000">: </span><span style="color: #267F99">string</span><span style="color: #000000">;</span>
+
+<span style="color: #000000">  @</span><span style="color: #795E26">Values</span><span style="color: #000000">(...)</span>
+<span style="color: #000000">  </span><span style="color: #001080">booleanProperty</span><span style="color: #000000">: </span><span style="color: #267F99">boolean</span><span style="color: #000000">;</span>
+<span style="color: #000000">}</span>
+</code></pre>
+						<a href="#execution" id="execution" style="color: inherit; text-decoration: none;">
+							<h2>Execution</h2>
+						</a>
+						<a href="#watch-mode" id="watch-mode" style="color: inherit; text-decoration: none;">
+							<h3>Watch mode</h3>
+						</a>
+						<p>Run <code>npm start</code> to start the development server and automatically rebuild on changes</p>
+						<a href="#local-development" id="local-development" style="color: inherit; text-decoration: none;">
+							<h3>Local Development</h3>
+						</a>
+						<p>Ensure that you have made the <a href="./selfserve.html#code-changes">Code changes</a>.</p>
+						<ul>
+							<li>Go to <code>https://ms.portal.azure.com/</code></li>
+							<li>Add the query string <code>feature.showSelfServeExample=true&amp;feature.selfServeSource=https://localhost:1234/selfServe.html?selfServeType%3D&lt;SELF_SERVE_TYPE&gt;</code></li>
+							<li>Click on the <code>Self Serve Example</code> menu item on the left panel.</li>
+						</ul>
+						<p>For example, if you want to open up the the UI of a class with the type <code>sqlx</code>, then visit <code>https://ms.portal.azure.com/?feature.showSelfServeExample=true&amp;feature.selfServeSource=https://localhost:1234/selfServe.html?selfServeType%3Dsqlx</code></p>
+						<p><img src="https://sdkctlstore.blob.core.windows.net/exe/selfserveDev.PNG" alt=""></p>
+					</div>
+				</div>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/modules/selfserve___what_is_currently_supported_.html
+++ b/docs/modules/selfserve___what_is_currently_supported_.html
@@ -0,0 +1,149 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe - What is currently supported? | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve___what_is_currently_supported_.html">SelfServe - What is currently supported?</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe - What is currently supported?</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel tsd-comment">
+				<div class="tsd-comment tsd-typography">
+					<div class="lead">
+						<p>The Self Serve framework has integrated support for</p>
+						<ol>
+							<li><a href="./selfserve.html#portal-notifications">Portal Notifications</a></li>
+							<li><a href="./selfserve.html#telemetry">Telemetry</a></li>
+							<li>the following UI controls:<ul>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/slider">Slider</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/spinbutton">SpinButton</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield">TextField</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/toggle">Toggle</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown">Dropdown</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/link">Link</a></li>
+									<li><a href="https://developer.microsoft.com/en-us/fluentui#/controls/web/messagebar">MessageBar</a></li>
+								</ul>
+							</li>
+						</ol>
+					</div>
+				</div>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/modules/selfserve_decorators.html
+++ b/docs/modules/selfserve_decorators.html
@@ -0,0 +1,341 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe/Decorators | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve_decorators.html">SelfServe/Decorators</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe/Decorators</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Interfaces</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Type aliases</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Functions</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_decorators.html#values" class="tsd-kind-icon">Values</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Type aliases</h2>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="inputoptions" class="tsd-anchor"></a>
+					<h3>Input<wbr>Options</h3>
+					<div class="tsd-signature tsd-kind-icon">Input<wbr>Options<span class="tsd-signature-symbol">:</span> <a href="../interfaces/selfserve_decorators.numberinputoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">NumberInputOptions</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_decorators.stringinputoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">StringInputOptions</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_decorators.booleaninputoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">BooleanInputOptions</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_decorators.choiceinputoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">ChoiceInputOptions</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_decorators.descriptiondisplayoptions.html" class="tsd-signature-type" data-tsd-kind="Interface">DescriptionDisplayOptions</a></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Interprets the type of the UI element and correspondingly renders</p>
+							<ul>
+								<li>slider or spinner</li>
+								<li>text box</li>
+								<li>toggle</li>
+								<li>drop down</li>
+								<li>plain text or message bar</li>
+							</ul>
+						</div>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Functions</h2>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="isdisplayable" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> Is<wbr>Displayable</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">Is<wbr>Displayable<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ClassDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Indicates to the compiler that UI should be generated from this class.</p>
+								</div>
+							</div>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ClassDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="onchange" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> On<wbr>Change</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">On<wbr>Change<span class="tsd-signature-symbol">(</span>onChange<span class="tsd-signature-symbol">: </span><a href="selfserve_selfservetypes.html#onchangecallback" class="tsd-signature-type" data-tsd-kind="Type alias">OnChangeCallback</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">PropertyDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Indicates the callback to be fired when the UI element corresponding to the property is changed.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>onChange: <a href="selfserve_selfservetypes.html#onchangecallback" class="tsd-signature-type" data-tsd-kind="Type alias">OnChangeCallback</a></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">PropertyDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="propertyinfo" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> Property<wbr>Info</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">Property<wbr>Info<span class="tsd-signature-symbol">(</span>info<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-signature-type" data-tsd-kind="Interface">Info</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-signature-type" data-tsd-kind="Interface">Info</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">PropertyDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Indicates that the UI element corresponding to the property should have an Info bubble. The Info
+									bubble is the icon that looks like an &quot;i&quot; which users click on to get more information about the UI element.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>info: <a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-signature-type" data-tsd-kind="Interface">Info</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-signature-type" data-tsd-kind="Interface">Info</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">PropertyDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="refreshoptions" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> Refresh<wbr>Options</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">Refresh<wbr>Options<span class="tsd-signature-symbol">(</span>refreshParams<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshParams</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ClassDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>If there is a long running operation in your page after the <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#onsave"><code>onSave</code></a> action, the page can
+										optionally auto refresh itself using the <a href="../classes/selfserve_selfservetypes.selfservebaseclass.html#onrefresh"><code>onRefresh</code></a> action. The &#39;RefreshOptions&#39; indicate
+									how often the auto refresh of the page occurs.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>refreshParams: <a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-signature-type" data-tsd-kind="Interface">RefreshParams</a></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">ClassDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="values" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> Values</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">Values<span class="tsd-signature-symbol">(</span>inputOptions<span class="tsd-signature-symbol">: </span><a href="selfserve_decorators.html#inputoptions" class="tsd-signature-type" data-tsd-kind="Type alias">InputOptions</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">PropertyDecorator</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Indicates that this property should correspond to a UI element with the given parameters.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>inputOptions: <a href="selfserve_decorators.html#inputoptions" class="tsd-signature-type" data-tsd-kind="Type alias">InputOptions</a></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">PropertyDecorator</span></h4>
+						</li>
+					</ul>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.booleaninputoptions.html" class="tsd-kind-icon">Boolean<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.choiceinputoptions.html" class="tsd-kind-icon">Choice<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.descriptiondisplayoptions.html" class="tsd-kind-icon">Description<wbr>Display<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.numberinputoptions.html" class="tsd-kind-icon">Number<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_decorators.stringinputoptions.html" class="tsd-kind-icon">String<wbr>Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#inputoptions" class="tsd-kind-icon">Input<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#isdisplayable" class="tsd-kind-icon">Is<wbr>Displayable</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#onchange" class="tsd-kind-icon">On<wbr>Change</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#propertyinfo" class="tsd-kind-icon">Property<wbr>Info</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#refreshoptions" class="tsd-kind-icon">Refresh<wbr>Options</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_decorators.html#values" class="tsd-kind-icon">Values</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/modules/selfserve_selfservetelemetryprocessor.html
+++ b/docs/modules/selfserve_selfservetelemetryprocessor.html
@@ -0,0 +1,323 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe/SelfServeTelemetryProcessor | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetelemetryprocessor.html">SelfServe/SelfServeTelemetryProcessor</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe/SelfServeTelemetryProcessor</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Functions</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetrace" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetracecancel" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Cancel</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetracefailure" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Failure</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetracestart" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Start</a></li>
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfservetelemetryprocessor.html#selfservetracesuccess" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Success</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Functions</h2>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetrace" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Log an action.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetracecancel" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace<wbr>Cancel</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Cancel<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a>, timestamp<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Log an action as cancelled.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+								<li>
+									<h5><span class="tsd-flag ts-flagOptional">Optional</span> timestamp: <span class="tsd-signature-type">number</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Timestamp of the action&#39;s start trace.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetracefailure" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace<wbr>Failure</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Failure<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a>, timestamp<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Log an action as a failure.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+								<li>
+									<h5><span class="tsd-flag ts-flagOptional">Optional</span> timestamp: <span class="tsd-signature-type">number</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Timestamp of the action&#39;s start trace.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetracestart" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace<wbr>Start</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Start<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Start logging an action.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4>
+							<p>Timestamp of the trace start, that can be used in other trace actions.
+							The timestamp is used to identify all the logs associated with an action.</p>
+						</li>
+					</ul>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="selfservetracesuccess" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> self<wbr>Serve<wbr>Trace<wbr>Success</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Success<span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a>, timestamp<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Log an action as a success.</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>data: <a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-signature-type" data-tsd-kind="Interface">SelfServeTelemetryMessage</a></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Data to be sent as part of the Self Serve Telemetry.</p>
+									</div>
+								</li>
+								<li>
+									<h5><span class="tsd-flag ts-flagOptional">Optional</span> timestamp: <span class="tsd-signature-type">number</span></h5>
+									<div class="tsd-comment tsd-typography">
+										<p>Timestamp of the action&#39;s start trace.</p>
+									</div>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
+						</li>
+					</ul>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetrace" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetracecancel" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Cancel</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetracefailure" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Failure</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetracestart" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Start</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html#selfservetracesuccess" class="tsd-kind-icon">self<wbr>Serve<wbr>Trace<wbr>Success</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/modules/selfserve_selfservetypes.html
+++ b/docs/modules/selfserve_selfservetypes.html
@@ -0,0 +1,363 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe/SelfServeTypes | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve_selfservetypes.html">SelfServe/SelfServeTypes</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe/SelfServeTypes</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumerations</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum tsd-parent-kind-module"><a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a></li>
+								<li class="tsd-kind-enum tsd-parent-kind-module"><a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Classes</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Interfaces</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a></li>
+								<li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Type aliases</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a></li>
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a></li>
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a></li>
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a></li>
+								<li class="tsd-kind-type-alias tsd-parent-kind-module"><a href="selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Type aliases</h2>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="choiceitem" class="tsd-anchor"></a>
+					<h3>Choice<wbr>Item</h3>
+					<div class="tsd-signature tsd-kind-icon">Choice<wbr>Item<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span>key<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">; </span>labelTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> }</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter">
+								<h5>key<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Key used to pickup the string that uniquely identifies the dropdown choice item, from the strings JSON file.</p>
+									</div>
+								</div>
+							</li>
+							<li class="tsd-parameter">
+								<h5>labelTKey<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></h5>
+								<div class="tsd-comment tsd-typography">
+									<div class="lead">
+										<p>Key used to pickup the string corresponding to the label of the dropdown choice item, from the strings JSON file.</p>
+									</div>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="inputtype" class="tsd-anchor"></a>
+					<h3>Input<wbr>Type</h3>
+					<div class="tsd-signature tsd-kind-icon">Input<wbr>Type<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><a href="selfserve_selfservetypes.html#choiceitem" class="tsd-signature-type" data-tsd-kind="Type alias">ChoiceItem</a><span class="tsd-signature-symbol"> | </span><a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-signature-type" data-tsd-kind="Interface">Description</a></div>
+					<aside class="tsd-sources">
+					</aside>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="onchangecallback" class="tsd-anchor"></a>
+					<h3>On<wbr>Change<wbr>Callback</h3>
+					<div class="tsd-signature tsd-kind-icon">On<wbr>Change<wbr>Callback<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span>newValue<span class="tsd-signature-symbol">: </span><a href="selfserve_selfservetypes.html#inputtype" class="tsd-signature-type" data-tsd-kind="Type alias">InputType</a>, currentValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span>, baselineValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-comment tsd-typography">
+						<div class="lead">
+							<p>Function that dictates how the overall UI should transform when the UI element corresponding to a property, say prop1, is changed.
+							The callback can be used to<br>          * Change the value (and reflect it in the UI) for another property, say prop2<br>          * Change the visibility for prop2 in the UI<br>          * Disable or enable the UI element corresponding to prop2<br>depending on logic based on the newValue of prop1, the currentValues Map and baselineValues Map.</p>
+						</div>
+					</div>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter-signature">
+								<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-alias">
+									<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>newValue<span class="tsd-signature-symbol">: </span><a href="selfserve_selfservetypes.html#inputtype" class="tsd-signature-type" data-tsd-kind="Type alias">InputType</a>, currentValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span>, baselineValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></li>
+								</ul>
+								<ul class="tsd-descriptions">
+									<li class="tsd-description">
+										<h4 class="tsd-parameters-title">Parameters</h4>
+										<ul class="tsd-parameters">
+											<li>
+												<h5>newValue: <a href="selfserve_selfservetypes.html#inputtype" class="tsd-signature-type" data-tsd-kind="Type alias">InputType</a></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The newValue that the property needs to be set to, after the change in the UI element corresponding to this property.</p>
+												</div>
+											</li>
+											<li>
+												<h5>currentValues: <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the current state of the UI.</p>
+												</div>
+											</li>
+											<li>
+												<h5>baselineValues: <span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the initial state of the UI.</p>
+												</div>
+											</li>
+										</ul>
+										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h4>
+										<p>A new Map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the new state of the overall UI</p>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="initializecallback" class="tsd-anchor"></a>
+					<h3>initialize<wbr>Callback</h3>
+					<div class="tsd-signature tsd-kind-icon">initialize<wbr>Callback<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter-signature">
+								<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-alias">
+									<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span></li>
+								</ul>
+								<ul class="tsd-descriptions">
+									<li class="tsd-description">
+										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">&gt;</span></h4>
+										<p>Promise of Map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> which will become the current state of the UI.</p>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+				<section class="tsd-panel tsd-member tsd-kind-type-alias tsd-parent-kind-module">
+					<a name="onsavecallback" class="tsd-anchor"></a>
+					<h3>on<wbr>Save<wbr>Callback</h3>
+					<div class="tsd-signature tsd-kind-icon">on<wbr>Save<wbr>Callback<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">(</span>currentValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span>, baselineValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-signature-type" data-tsd-kind="Interface">OnSaveResult</a><span class="tsd-signature-symbol">&gt;</span></div>
+					<aside class="tsd-sources">
+					</aside>
+					<div class="tsd-type-declaration">
+						<h4>Type declaration</h4>
+						<ul class="tsd-parameters">
+							<li class="tsd-parameter-signature">
+								<ul class="tsd-signatures tsd-kind-type-literal tsd-parent-kind-type-alias">
+									<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">(</span>currentValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span>, baselineValues<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-signature-type" data-tsd-kind="Interface">OnSaveResult</a><span class="tsd-signature-symbol">&gt;</span></li>
+								</ul>
+								<ul class="tsd-descriptions">
+									<li class="tsd-description">
+										<h4 class="tsd-parameters-title">Parameters</h4>
+										<ul class="tsd-parameters">
+											<li>
+												<h5>currentValues: <span class="tsd-signature-type">Map</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the current state of the UI</p>
+												</div>
+											</li>
+											<li>
+												<h5>baselineValues: <span class="tsd-signature-type">ReadonlyMap</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-signature-type" data-tsd-kind="Interface">SmartUiInput</a><span class="tsd-signature-symbol">&gt;</span></h5>
+												<div class="tsd-comment tsd-typography">
+													<p>The map of propertyName =&gt; <a href="../interfaces/selfserve_selfservetypes.smartuiinput.html"><code>SmartUiInput</code></a> corresponding to the initial state of the UI</p>
+												</div>
+											</li>
+										</ul>
+										<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-signature-type" data-tsd-kind="Interface">OnSaveResult</a><span class="tsd-signature-symbol">&gt;</span></h4>
+									</li>
+								</ul>
+							</li>
+						</ul>
+					</div>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.descriptiontype.html" class="tsd-kind-icon">Description<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfservetypes.numberuitype.html" class="tsd-kind-icon">Number<wbr>UiType</a>
+					</li>
+					<li class=" tsd-kind-class tsd-parent-kind-module">
+						<a href="../classes/selfserve_selfservetypes.selfservebaseclass.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Base<wbr>Class</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.description.html" class="tsd-kind-icon">Description</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.info.html" class="tsd-kind-icon">Info</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.onsaveresult.html" class="tsd-kind-icon">On<wbr>Save<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshparams.html" class="tsd-kind-icon">Refresh<wbr>Params</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.refreshresult.html" class="tsd-kind-icon">Refresh<wbr>Result</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.selfservetelemetrymessage.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Telemetry<wbr>Message</a>
+					</li>
+					<li class=" tsd-kind-interface tsd-parent-kind-module">
+						<a href="../interfaces/selfserve_selfservetypes.smartuiinput.html" class="tsd-kind-icon">Smart<wbr>UiInput</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#choiceitem" class="tsd-kind-icon">Choice<wbr>Item</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#inputtype" class="tsd-kind-icon">Input<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#onchangecallback" class="tsd-kind-icon">On<wbr>Change<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#initializecallback" class="tsd-kind-icon">initialize<wbr>Callback</a>
+					</li>
+					<li class=" tsd-kind-type-alias tsd-parent-kind-module">
+						<a href="selfserve_selfservetypes.html#onsavecallback" class="tsd-kind-icon">on<wbr>Save<wbr>Callback</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/docs/modules/selfserve_selfserveutils.html
+++ b/docs/modules/selfserve_selfserveutils.html
@@ -0,0 +1,185 @@
+<!doctype html>
+<html class="default no-js">
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>SelfServe/SelfServeUtils | cosmos-explorer</title>
+	<meta name="description" content="Documentation for cosmos-explorer">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="../assets/css/main.css">
+	<script async src="../assets/js/search.js" id="search-script"></script>
+</head>
+<body>
+<header>
+	<div class="tsd-page-toolbar">
+		<div class="container">
+			<div class="table-wrap">
+				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
+					<div class="field">
+						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
+						<input id="tsd-search-field" type="text" />
+					</div>
+					<ul class="results">
+						<li class="state loading">Preparing search index...</li>
+						<li class="state failure">The search index is not available</li>
+					</ul>
+					<a href="../index.html" class="title">cosmos-explorer</a>
+				</div>
+				<div class="table-cell" id="tsd-widgets">
+					<div id="tsd-filter">
+						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+						<div class="tsd-filter-group">
+							<div class="tsd-select" id="tsd-filter-visibility">
+								<span class="tsd-select-label">All</span>
+								<ul class="tsd-select-list">
+									<li data-value="public">Public</li>
+									<li data-value="protected">Public/Protected</li>
+									<li data-value="private" class="selected">All</li>
+								</ul>
+							</div>
+							<input type="checkbox" id="tsd-filter-inherited" checked />
+							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
+							<input type="checkbox" id="tsd-filter-externals" checked />
+							<label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+						</div>
+					</div>
+					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="tsd-page-title">
+		<div class="container">
+			<ul class="tsd-breadcrumb">
+				<li>
+					<a href="../modules.html">cosmos-explorer</a>
+				</li>
+				<li>
+					<a href="selfserve_selfserveutils.html">SelfServe/SelfServeUtils</a>
+				</li>
+			</ul>
+			<h1>Module SelfServe/SelfServeUtils</h1>
+		</div>
+	</div>
+</header>
+<div class="container container-main">
+	<div class="row">
+		<div class="col-8 col-content">
+			<section class="tsd-panel-group tsd-index-group">
+				<h2>Index</h2>
+				<section class="tsd-panel tsd-index-panel">
+					<div class="tsd-index-content">
+						<section class="tsd-index-section ">
+							<h3>Enumerations</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-enum tsd-parent-kind-module"><a href="../enums/selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a></li>
+								<li class="tsd-kind-enum tsd-parent-kind-module"><a href="../enums/selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a></li>
+							</ul>
+						</section>
+						<section class="tsd-index-section ">
+							<h3>Functions</h3>
+							<ul class="tsd-index-list">
+								<li class="tsd-kind-function tsd-parent-kind-module"><a href="selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a></li>
+							</ul>
+						</section>
+					</div>
+				</section>
+			</section>
+			<section class="tsd-panel-group tsd-member-group ">
+				<h2>Functions</h2>
+				<section class="tsd-panel tsd-member tsd-kind-function tsd-parent-kind-module">
+					<a name="generatebladelink" class="tsd-anchor"></a>
+					<h3><span class="tsd-flag ts-flagConst">Const</span> generate<wbr>Blade<wbr>Link</h3>
+					<ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
+						<li class="tsd-signature tsd-kind-icon">generate<wbr>Blade<wbr>Link<span class="tsd-signature-symbol">(</span>blade<span class="tsd-signature-symbol">: </span><a href="../enums/selfserve_selfserveutils.bladetype.html" class="tsd-signature-type" data-tsd-kind="Enumeration">BladeType</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li>
+					</ul>
+					<ul class="tsd-descriptions">
+						<li class="tsd-description">
+							<aside class="tsd-sources">
+							</aside>
+							<div class="tsd-comment tsd-typography">
+								<div class="lead">
+									<p>Generate the URL corresponding to the portal blade for the current Azure Cosmos DB account</p>
+								</div>
+							</div>
+							<h4 class="tsd-parameters-title">Parameters</h4>
+							<ul class="tsd-parameters">
+								<li>
+									<h5>blade: <a href="../enums/selfserve_selfserveutils.bladetype.html" class="tsd-signature-type" data-tsd-kind="Enumeration">BladeType</a></h5>
+								</li>
+							</ul>
+							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
+						</li>
+					</ul>
+				</section>
+			</section>
+		</div>
+		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
+			<nav class="tsd-navigation primary">
+				<ul>
+					<li class=" ">
+						<a href="../modules.html">Modules</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve.html">Self<wbr>Serve</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve___what_is_currently_supported_.html">Self<wbr>Serve -<wbr> <wbr>What is currently supported?</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_decorators.html">Self<wbr>Serve/<wbr>Decorators</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetelemetryprocessor.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Telemetry<wbr>Processor</a>
+					</li>
+					<li class=" tsd-kind-module">
+						<a href="selfserve_selfservetypes.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Types</a>
+					</li>
+					<li class="current tsd-kind-module">
+						<a href="selfserve_selfserveutils.html">Self<wbr>Serve/<wbr>Self<wbr>Serve<wbr>Utils</a>
+					</li>
+				</ul>
+			</nav>
+			<nav class="tsd-navigation secondary menu-sticky">
+				<ul class="before-current">
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfserveutils.bladetype.html" class="tsd-kind-icon">Blade<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-enum tsd-parent-kind-module">
+						<a href="../enums/selfserve_selfserveutils.selfservetype.html" class="tsd-kind-icon">Self<wbr>Serve<wbr>Type</a>
+					</li>
+					<li class=" tsd-kind-function tsd-parent-kind-module">
+						<a href="selfserve_selfserveutils.html#generatebladelink" class="tsd-kind-icon">generate<wbr>Blade<wbr>Link</a>
+					</li>
+				</ul>
+			</nav>
+		</div>
+	</div>
+</div>
+<footer class="with-border-bottom">
+	<div class="container">
+		<h2>Legend</h2>
+		<div class="tsd-legend-group">
+			<ul class="tsd-legend">
+				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
+				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
+			</ul>
+			<ul class="tsd-legend">
+				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
+			</ul>
+		</div>
+	</div>
+</footer>
+<div class="container tsd-generator">
+	<p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p>
+</div>
+<div class="overlay"></div>
+<script src="../assets/js/main.js"></script>
+</body>
+</html>
--- a/externals/iframeResizer.contentWindow.min.js
+++ b/externals/iframeResizer.contentWindow.min.js
--- a/jest-playwright.config.js
+++ b/jest-playwright.config.js
@@ -1,11 +1,13 @@
 const isCI = require("is-ci");

 module.exports = {
-  launch: {
+  exitOnPageError: false,
+  launchOptions: {
    headless: isCI,
-    slowMo: 55,
-    defaultViewport: null,
+    slowMo: 10,
+    timeout: 60000,
+  },
+  contextOptions: {
    ignoreHTTPSErrors: true,
-    args: ["--disable-web-security"],
  },
 };
--- a/jest.config.e2e.js
+++ b/jest.config.e2e.js
@@ -1,5 +0,0 @@
-module.exports = {
-  preset: "jest-puppeteer",
-  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
-  setupFiles: ["dotenv/config"],
-};
--- a/jest.config.js
+++ b/jest.config.js
@@ -21,17 +21,13 @@ module.exports = {
  collectCoverage: true,

  // An array of glob patterns indicating a set of files for which coverage information should be collected
-  // collectCoverageFrom: [
-  //   "src/Common/Headers*"
-  // ],
+  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],

  // The directory where Jest should output its coverage files
  coverageDirectory: "coverage",

  // An array of regexp pattern strings used to skip coverage collection
-  // coveragePathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  coveragePathIgnorePatterns: ["/node_modules/"],

  // A list of reporter names that Jest uses when writing coverage reports
  coverageReporters: ["json", "text", "cobertura"],
@@ -39,10 +35,10 @@ module.exports = {
  // An object that configures minimum threshold enforcement for coverage results
  coverageThreshold: {
    global: {
-      branches: 22,
-      functions: 28,
-      lines: 33,
-      statements: 31,
+      branches: 25,
+      functions: 25,
+      lines: 30,
+      statements: 30,
    },
  },

@@ -71,9 +67,10 @@ module.exports = {

  // A map from regular expressions to module names that allow to stub out resources with a single module
  moduleNameMapper: {
-    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
-    "worker-loader": "<rootDir>/mockModule",
-    "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
+    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
+    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
+    "@fluentui/react/lib/(.*)$": "@fluentui/react/lib-commonjs/$1", // https://github.com/microsoft/fluentui/wiki/Version-8-release-notes
+    "monaco-editor/(.*)$": "<rootDir>/__mocks__/monaco-editor",
    "^dnd-core$": "dnd-core/dist/cjs",
    "^react-dnd$": "react-dnd/dist/cjs",
    "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
--- a/jest.config.playwright.js
+++ b/jest.config.playwright.js
@@ -0,0 +1,7 @@
+module.exports = {
+  preset: "jest-playwright-preset",
+  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
+  setupFiles: ["dotenv/config"],
+  testEnvironment: "./test/playwrightEnv.js",
+  setupFilesAfterEnv: ["expect-playwright"],
+};
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -4,7 +4,7 @@

@font-face {
  font-family: wf_segoe-ui_normal;
-  src: url("../../fonts/segoe-ui/west-european/normal/latest.woff");
+  src: local("Segoe UI"), url("../../fonts/segoe-ui/west-european/normal/latest.woff");
 }

@DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -718,51 +718,30 @@ execute-sproc-params-pane {
  }
 }

-stored-procedure-tab {
+.stored-procedure-tab {
  @ToggleHeight: 30px;
  @ToggleWidth: 180px;

  .results-container,
  .errors-container {
-    padding: @MediumSpace 0px 0px @MediumSpace;
    height: 100%;
    .flex-display();
    .flex-direction();
    overflow: hidden;

-    .toggles {
-      height: @ToggleHeight;
-      width: @ToggleWidth;
-      margin-left: @MediumSpace;
-
-      &:focus {
-        .focus();
-      }
-
-      .tab {
-        margin-right: @MediumSpace;
-      }
-
-      .toggleSwitch {
-        .toggleSwitch();
-      }
-
-      .selectedToggle {
-        .selectedToggle();
-      }
-
-      .unselectedToggle {
-        .unselectedToggle();
-      }
-    }
-
    .enterInputParameters {
      padding: @LargeSpace @MediumSpace;
    }
+
+    div[role="tabpanel"] {
+      height: 100%;
+      padding-bottom: 50px;
+    }
  }

  .errors-container {
    padding-left: (2 * @MediumSpace);
+    padding: @MediumSpace 0px 0px @MediumSpace;
    .errors-header {
      font-weight: 700;
      font-size: @DefaultFontSize;
@@ -1757,7 +1736,7 @@ input::-webkit-calendar-picker-indicator {
  cursor: pointer;
 }

-.contextual-pane .paneMainContent {
+.paneMainContent {
  flex: 1;
  padding-left: 34px;
  padding-right: 34px;
@@ -3085,3 +3064,14 @@ settings-pane {
    padding-left: @SmallSpace;
  }
 }
+.hiddenMain {
+  display: none;
+  height: 0px;
+}
+.spinner {
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  background: white;
+  height: 100%;
+}
--- a/less/forms.less
+++ b/less/forms.less
@@ -200,4 +200,12 @@

 .migration:disabled {
    background-color: #ccc;
+}
+
+.trigger-field {
+    width: 40%;
+    margin-top: 10px
+}
+.trigger-form {
+    padding: 10px 30px 10px 30px;
 }
--- a/less/resourceTree.less
+++ b/less/resourceTree.less
@@ -2,6 +2,7 @@

 .dataResourceTree {
  margin-left: @MediumSpace;
+  overflow: auto;

  .databaseHeader {
    font-size: 14px;
--- a/less/tree.less
+++ b/less/tree.less
@@ -1,272 +1,270 @@
@import "./Common/Constants";

-
 .resourceTree {
+  height: 100%;
+  flex: 0 0 auto;
+  .main {
    height: 100%;
-    flex: 0 0 auto;
-    .main {
-        height: 100%;
-    }
+  }
 }

 .resourceTreeScroll {
-    height: 100%;
-    display: flex;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-right: 10px;
+  height: 100%;
+  display: flex;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 10px;
 }

 .userSelectNone {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }

 .treeHovermargin {
-    margin-left: 16px;
+  margin-left: 16px;
 }

 .highlight {
-    padding: @SmallSpace 2px;
-    outline: 0;
+  padding: @SmallSpace 2px;
+  outline: 0;

-    &:hover {
-        .hover();
-    }
+  &:hover {
+    .hover();
+  }

-    &:active {
-        .active();
-    }
+  &:active {
+    .active();
+  }

-    &:focus {
-        .focus();
-    }
+  &:focus {
+    .focus();
+  }
 }

 .contextmenushowing {
-    background-color: #EEE;
+  background-color: #eee;
 }

 .collectionstree {
-    width: 100%;
-    margin-top: @DefaultSpace;
+  width: 100%;
+  margin-top: @DefaultSpace;

+  .databaseList {
+    list-style-type: none;
+    padding-left: 0px;

-    .databaseList {
-        list-style-type: none;
-        padding-left: 0px;
-
-        .collectionList {
-            padding-left:(2 * @MediumSpace);
-        }
-
-        .collectionChildList {
-            padding-left: @LargeSpace;
-        }
-
-        .databaseDocuments {
-            padding-left: (5 * @MediumSpace);
-        }
+    .collectionList {
+      padding-left: (2 * @MediumSpace);
    }
+
+    .collectionChildList {
+      padding-left: @LargeSpace;
+    }
+
+    .databaseDocuments {
+      padding-left: (5 * @MediumSpace);
+    }
+  }
 }

 .pointerCursor {
-    cursor: pointer;
+  cursor: pointer;
 }

 .menuEllipsis {
-    padding-right: 6px;
-    font-weight: bold;
-    font-size: 18px;
-    position: relative;
-    top: -5px;
-    left: 0px;
-    float: right;
-    display: none;
-    padding-left: 6px!important;
-    line-height: @TreeLineHeight;
+  padding-right: 6px;
+  font-weight: bold;
+  font-size: 18px;
+  position: relative;
+  top: -5px;
+  left: 0px;
+  float: right;
+  display: none;
+  padding-left: 6px !important;
+  line-height: @TreeLineHeight;
 }

 .databaseMenu {
-    .flex-display();
+  .flex-display();
 }

 .databaseMenu:hover .menuEllipsis,
 .databaseMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .databaseCollChildTextOverflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex: 1;
 }

 .collectionMenu {
-    .flex-display();
+  .flex-display();
 }

 .collectionMenu:hover .menuEllipsis,
 .collectionMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .documentsMenu:hover .menuEllipsis,
 .documentsMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .treeChildMenu {
-    display: flex;
+  display: flex;
 }

 .storedProcedureMenu:hover .menuEllipsis,
 .storedProcedureMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .childMenu {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-left: (6 * @MediumSpace);
-    width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: (6 * @MediumSpace);
+  width: 100%;
 }

 .storedChildMenu:hover .menuEllipsis,
 .storedChildMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .contextmenu6 {
-    top: -29px;
+  top: -29px;
 }

 .userDefinedMenu:hover .contextmenu6 {
-    display: block;
+  display: block;
 }

 .userDefinedchildMenu:hover .menuEllipsis,
 .userDefinedchildMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .triggersMenu:hover .menuEllipsis,
 .triggersMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .triggersChildMenu:hover .menuEllipsis,
 .triggersChildMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .databaseId {
-    font-size: 14px;
+  font-size: 14px;
 }

 .storedUdfTriggerMenu {
-    padding-left: 0px;
+  padding-left: 0px;
 }

 .collectionstree img {
-    width: 16px;
-    height: 16px;
-    vertical-align: text-top;
+  width: 16px;
+  height: 16px;
+  vertical-align: text-top;
 }

 img.collectionsTreeCollapseExpand {
-    width: 10px;
-    height: 10px;
-    vertical-align: middle;
-    margin-bottom: 5px;
+  width: 10px;
+  height: 10px;
+  vertical-align: middle;
+  margin-bottom: 5px;
 }

 .collapsed::before {
-    content: "\23F5";
-    margin-left: 0px;
-    font-size: 15px;
+  content: "\23F5";
+  margin-left: 0px;
+  font-size: 15px;
 }

 .expanded::before {
-    content: '\23F7';
-    margin-left: 0px;
-    font-size: 15px;
+  content: "\23F7";
+  margin-left: 0px;
+  font-size: 15px;
 }

 .collectionMenuChildren {
-    padding-left: 42px;
+  padding-left: 42px;
 }

 .main-nav {
-    width: 100vh;
-    height: 40px;
-    background: white;
-    transform-origin: left top;
-    -webkit-transform-origin: left top;
-    -ms-transform-origin: left top;
-    transform: rotate(-90deg) translateX(-100%);
-    -webkit-transform: rotate(-90deg) translateX(-100%);
-    -ms-transform: rotate(-90deg) translateX(-100%);
-    border-bottom: 1px solid #CCC;
+  width: 100vh;
+  height: 40px;
+  background: white;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
+  border-bottom: 1px solid #ccc;
 }

 .main-nav-img {
-    width: 16px;
-    height: 16px;
-    margin: -32px 0 0 0;
-    transform: rotate(-90deg) translateX(-100%);
-    -webkit-transform: rotate(-90deg) translateX(-100%);
-    -ms-transform: rotate(-90deg) translateX(-100%);
+  width: 16px;
+  height: 16px;
+  margin: -32px 0 0 0;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
 }

 .main-nav-img.main-nav-sub-img {
-    width: 16px;
-    height: 16px;
-    margin: 0px 0px 0 0;
-    transform: rotate(180deg) translateX(0%);
-    -webkit-transform: rotate(180deg) translateX(0%);
-    -ms-transform: rotate(180deg) translateX(0%);
-    position: absolute;
-    right: -8px;
-    top: 16px;
+  width: 16px;
+  height: 16px;
+  margin: 0px 0px 0 0;
+  transform: rotate(180deg) translateX(0%);
+  -webkit-transform: rotate(180deg) translateX(0%);
+  -ms-transform: rotate(180deg) translateX(0%);
+  position: absolute;
+  right: -8px;
+  top: 16px;
 }

 ul.nav {
-    margin: 0 auto;
-    margin-top: 0px;
-    margin-left: 0px;
+  margin: 0 auto;
+  margin-top: 0px;
+  margin-left: 0px;
 }

 .mini ul.nav li {
-    float: right;
-    line-height: 25px;
-    height: auto;
-    margin-top: 3px;
+  float: right;
+  line-height: 25px;
+  height: auto;
+  margin-top: 3px;
 }

 .spancolchildstyle {
-    padding: 4px;
+  padding: 4px;
 }

 .contextmenubutton {
-    float: right;
-    display: none;
+  float: right;
+  display: none;
 }

-.highlight:hover>.contextmenubutton {
-    display: unset;
+.highlight:hover > .contextmenubutton {
+  display: unset;
 }

-.highlight:hover>.contextmenubutton::after {
-    content: "\2026";
-    font-size: 12px;
+.highlight:hover > .contextmenubutton::after {
+  content: "\2026";
+  font-size: 12px;
 }

 .showEllipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,27 +5,29 @@
  "main": "index.js",
  "dependencies": {
    "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "3.9.0",
+    "@azure/cosmos": "3.10.5",
    "@azure/cosmos-language-service": "0.0.5",
    "@azure/identity": "1.2.1",
    "@azure/ms-rest-nodeauth": "3.0.7",
+    "@azure/msal-browser": "2.14.2",
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@babel/plugin-proposal-decorators": "7.12.12",
+    "@fluentui/react": "8.14.3",
    "@jupyterlab/services": "6.0.2",
    "@jupyterlab/terminal": "3.0.3",
-    "@microsoft/applicationinsights-web": "2.5.9",
+    "@microsoft/applicationinsights-web": "2.6.1",
    "@nteract/commutable": "7.4.2",
    "@nteract/connected-components": "6.8.2",
    "@nteract/core": "15.1.0",
    "@nteract/data-explorer": "8.0.3",
    "@nteract/directory-listing": "2.0.6",
    "@nteract/dropdown-menu": "1.0.1",
-    "@nteract/editor": "10.1.2",
+    "@nteract/editor": "10.1.12",
    "@nteract/fixtures": "2.3.0",
    "@nteract/iron-icons": "1.0.0",
    "@nteract/jupyter-widgets": "2.0.0",
    "@nteract/logos": "1.0.0",
-    "@nteract/markdown": "4.4.0",
+    "@nteract/markdown": "4.6.0",
    "@nteract/monaco-editor": "3.2.2",
    "@nteract/octicons": "2.0.0",
    "@nteract/outputs": "3.0.9",
@@ -40,13 +42,10 @@
    "@octokit/rest": "17.9.2",
    "@phosphor/widgets": "1.9.3",
    "@testing-library/jest-dom": "5.11.9",
+    "@types/lodash": "4.14.171",
    "@types/mkdirp": "1.0.1",
    "@types/node-fetch": "2.5.7",
-    "@uifabric/react-cards": "0.109.110",
-    "@uifabric/styling": "7.13.7",
-    "abort-controller": "3.0.0",
    "applicationinsights": "1.8.0",
-    "babel-polyfill": "6.26.0",
    "bootstrap": "3.4.1",
    "canvas": "file:./canvas",
    "clean-webpack-plugin": "0.1.19",
@@ -59,9 +58,8 @@
    "datatables.net-dt": "1.10.19",
    "date-fns": "1.29.0",
    "dayjs": "1.8.19",
+    "dom-to-image": "2.6.0",
    "dotenv": "8.2.0",
-    "es6-object-assign": "1.1.0",
-    "es6-symbol": "3.1.3",
    "eslint-plugin-jest": "23.13.2",
    "eslint-plugin-react": "7.20.0",
    "hasher": "1.2.0",
@@ -69,6 +67,7 @@
    "i18next": "19.8.4",
    "i18next-browser-languagedetector": "6.0.1",
    "i18next-http-backend": "1.0.23",
+    "iframe-resizer-react": "1.1.0",
    "immutable": "4.0.0-rc.12",
    "is-ci": "2.0.0",
    "jquery": "3.5.1",
@@ -77,13 +76,10 @@
    "knockout": "3.5.1",
    "mkdirp": "1.0.4",
    "monaco-editor": "0.18.1",
-    "msal": "1.4.4",
-    "object.entries": "1.1.0",
-    "office-ui-fabric-react": "7.134.1",
+    "ms": "2.1.3",
    "p-retry": "4.2.0",
    "plotly.js-cartesian-dist-min": "1.52.3",
-    "promise-polyfill": "8.1.0",
-    "promise.prototype.finally": "3.1.0",
+    "post-robot": "10.0.42",
    "q": "1.5.1",
    "react": "16.13.1",
    "react-animate-height": "2.0.8",
@@ -94,19 +90,18 @@
    "react-i18next": "11.8.5",
    "react-notification-system": "0.2.17",
    "react-redux": "7.1.3",
+    "react-splitter-layout": "4.0.0",
    "redux": "4.0.4",
    "reflect-metadata": "0.1.13",
    "rx-jupyter": "5.5.12",
    "rxjs": "6.6.3",
+    "sanitize-html": "2.3.3",
    "styled-components": "4.3.2",
    "swr": "0.4.0",
-    "text-encoding": "0.7.0",
+    "terser-webpack-plugin": "3.1.0",
    "underscore": "1.9.1",
-    "url-polyfill": "1.1.7",
    "utility-types": "3.10.0",
-    "webcrypto-liner": "1.1.4",
-    "webfontloader": "1.6.28",
-    "whatwg-fetch": "3.0.0"
+    "zustand": "3.5.0"
  },
  "devDependencies": {
    "@babel/core": "7.9.0",
@@ -118,30 +113,25 @@
    "@types/codemirror": "0.0.56",
    "@types/crossroads": "0.0.30",
    "@types/d3": "5.9.2",
+    "@types/dom-to-image": "2.6.2",
    "@types/enzyme": "3.10.7",
    "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/expect-puppeteer": "4.4.3",
    "@types/hasher": "0.0.31",
    "@types/jest": "26.0.20",
-    "@types/jest-environment-puppeteer": "4.3.2",
-    "@types/memoize-one": "4.1.1",
    "@types/node": "12.11.1",
-    "@types/promise.prototype.finally": "2.0.3",
-    "@types/prop-types": "15.5.8",
-    "@types/puppeteer": "3.0.1",
+    "@types/post-robot": "10.0.1",
    "@types/q": "1.5.1",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.0",
+    "@types/react": "17.0.3",
+    "@types/react-dom": "17.0.3",
    "@types/react-notification-system": "0.2.39",
    "@types/react-redux": "7.1.7",
+    "@types/react-splitter-layout": "3.0.1",
+    "@types/sanitize-html": "1.27.2",
    "@types/sinon": "2.3.3",
    "@types/styled-components": "5.1.1",
-    "@types/text-encoding": "0.0.33",
    "@types/underscore": "1.7.36",
-    "@types/webfontloader": "1.6.29",
-    "@typescript-eslint/eslint-plugin": "4.0.1",
-    "@typescript-eslint/parser": "4.0.1",
-    "axe-puppeteer": "1.1.0",
+    "@typescript-eslint/eslint-plugin": "4.22.0",
+    "@typescript-eslint/parser": "4.22.0",
    "babel-jest": "24.9.0",
    "babel-loader": "8.1.0",
    "buffer": "5.1.0",
@@ -156,17 +146,17 @@
    "eslint-plugin-no-null": "1.0.2",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "eslint-plugin-react-hooks": "4.2.0",
-    "expose-loader": "0.7.5",
+    "expect-playwright": "0.3.3",
    "fast-glob": "3.2.5",
    "file-loader": "2.0.0",
    "fs-extra": "7.0.0",
+    "html-inline-css-webpack-plugin": "1.11.0",
    "html-loader": "0.5.5",
    "html-loader-jest": "0.2.1",
-    "html-webpack-plugin": "3.2.0",
-    "inline-css": "2.2.5",
+    "html-webpack-plugin": "4.5.2",
    "jest": "25.5.4",
    "jest-canvas-mock": "2.1.0",
-    "jest-puppeteer": "4.4.0",
+    "jest-playwright-preset": "1.5.1",
    "jest-trx-results-processor": "0.0.7",
    "less": "3.8.1",
    "less-loader": "4.1.0",
@@ -174,24 +164,24 @@
    "mini-css-extract-plugin": "0.4.3",
    "monaco-editor-webpack-plugin": "1.7.0",
    "node-fetch": "2.6.1",
+    "playwright": "1.13.0",
    "prettier": "2.2.1",
-    "puppeteer": "4.0.0",
    "raw-loader": "0.5.1",
+    "react-dev-utils": "11.0.4",
    "rimraf": "3.0.0",
    "sinon": "3.2.1",
    "style-loader": "0.23.0",
-    "terser-webpack-plugin": "3.0.5",
    "ts-loader": "6.2.2",
    "tslint": "5.11.0",
    "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.0.2",
+    "typedoc": "0.20.36",
+    "typescript": "4.3.4",
    "url-loader": "1.1.1",
    "wait-on": "4.0.2",
-    "webpack": "4.43.0",
+    "webpack": "4.46.0",
    "webpack-bundle-analyzer": "3.6.1",
    "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.11.0",
-    "worker-loader": "2.0.0"
+    "webpack-dev-server": "3.11.0"
  },
  "scripts": {
    "start": "node --max-old-space-size=10196 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
@@ -203,10 +193,11 @@
    "pack:fast": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode development --progress",
    "copyToConsumers": "node copyToConsumers",
    "test": "rimraf coverage && jest",
-    "test:e2e": "jest -c ./jest.config.e2e.js --detectOpenHandles",
+    "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
    "watch": "npm run start",
    "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
    "build:ase": "gulp build:ase",
+    "selfServeDocs": "typedoc",
    "compile": "tsc",
    "compile:contracts": "tsc -p ./tsconfig.contracts.json",
    "compile:strict": "tsc -p ./tsconfig.strict.json",
@@ -214,10 +205,10 @@
    "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
    "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
    "build:contracts": "npm run compile:contracts",
-    "strictEligibleFiles": "node ./strict-migration-tools/index.js",
-    "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",
+    "strict:find": "node ./strict-null-checks/find.js",
+    "strict:add": "node ./strict-null-checks/auto-add.js",
    "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
-    "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
+    "generateARMClients": "npx ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
  },
  "repository": {
    "type": "git",
--- a/preview/.azure/config
+++ b/preview/.azure/config
@@ -0,0 +1,7 @@
+[defaults]
+group = stfaul
+sku = P1v2
+appserviceplan = stfaul_asp_Linux_centralus_0
+location = centralus
+web = cosmos-explorer-preview
+
--- a/preview/README.md
+++ b/preview/README.md
@@ -0,0 +1,20 @@
+# Cosmos Explorer Preview
+
+Cosmos Explorer Preview makes it possible to try a working version of any commit on master or in a PR. No need to run the app locally or deploy to staging.
+
+Initial support is for Hosted (Connection string only) or the Azure Portal. Examples:
+
+Connection string URLs: https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
+Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/explorer.html#home
+
+In both cases replace `COMMIT_SHA` with the commit you want to view. It must have already completed its build on GitHub Actions.
+
+### Architechture
+
+- This folder contains a NodeJS app deployed to Azure App Service that powers preview URLs:
+  - Paths starting with `/commit/` are proxied to an Azure Storage account containing build artifacts
+  - Paths starting with `/proxy/` are proxied dynamically to Cosmos account endpoints. Required otherwise CORS would need to be configured for every account accessed.
+  - Paths starting with `/api/` are proxied to Portal APIs that do not support CORS.
+- On GitHub Actions build completion:
+  - All files in dist are uploaded to an Azure Storage account namespaced by the SHA of the commit
+  - `/preview/config.json` is uploaded to the same folder with preview specific configuration
--- a/preview/config.json
+++ b/preview/config.json
@@ -0,0 +1,4 @@
+{
+  "PROXY_PATH": "/proxy",
+  "msalRedirectURI": "https://cosmos-explorer-preview.azurewebsites.net/"
+}
--- a/preview/index.js
+++ b/preview/index.js
@@ -0,0 +1,79 @@
+const express = require("express");
+const { createProxyMiddleware } = require("http-proxy-middleware");
+const port = process.env.PORT || 3000;
+const fetch = require("node-fetch");
+
+const api = createProxyMiddleware("/api", {
+  target: "https://main.documentdb.ext.azure.com",
+  changeOrigin: true,
+  logLevel: "debug",
+  bypass: (req, res) => {
+    if (req.method === "OPTIONS") {
+      res.statusCode = 200;
+      res.send();
+    }
+  },
+});
+
+const proxy = createProxyMiddleware("/proxy", {
+  target: "https://main.documentdb.ext.azure.com",
+  changeOrigin: true,
+  secure: false,
+  logLevel: "debug",
+  pathRewrite: { "^/proxy": "" },
+  router: (req) => {
+    let newTarget = req.headers["x-ms-proxy-target"];
+    return newTarget;
+  },
+});
+
+const commit = createProxyMiddleware("/commit", {
+  target: "https://cosmosexplorerpreview.blob.core.windows.net",
+  changeOrigin: true,
+  secure: false,
+  logLevel: "debug",
+  pathRewrite: { "^/commit": "$web/" },
+});
+
+const app = express();
+
+app.use(api);
+app.use(proxy);
+app.use(commit);
+app.get("/pull/:pr(\\d+)", (req, res) => {
+  const pr = req.params.pr;
+  const [, query] = req.originalUrl.split("?");
+  const search = new URLSearchParams(query);
+
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/pulls/" + pr)
+    .then((response) => response.json())
+    .then(({ head: { ref, sha } }) => {
+      const prUrl = new URL("https://github.com/Azure/cosmos-explorer/pull/" + pr);
+      prUrl.hash = ref;
+      search.set("feature.pr", prUrl.href);
+
+      const explorer = new URL("https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/explorer.html");
+      explorer.search = search.toString();
+
+      const portal = new URL("https://ms.portal.azure.com/");
+      portal.searchParams.set("dataExplorerSource", explorer.href);
+
+      return res.redirect(portal.href);
+    })
+    .catch(() => res.sendStatus(500));
+});
+app.get("/", (req, res) => {
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/branches/master")
+    .then((response) => response.json())
+    .then(({ commit: { sha } }) => {
+      const explorer = new URL(
+        "https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/hostedExplorer.html"
+      );
+      return res.redirect(explorer.href);
+    })
+    .catch(() => res.sendStatus(500));
+});
+
+app.listen(port, () => {
+  console.log(`Example app listening on port: ${port}`);
+});
--- a/preview/package-lock.json
+++ b/preview/package-lock.json
--- a/preview/package.json
+++ b/preview/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "cosmos-explorer-preview",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "deploy": "az webapp up -n cosmos-explorer-preview --subscription cosmosdb-portalteam-generaldemo -g stfaul",
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Microsoft Corporation",
+  "dependencies": {
+    "express": "^4.17.1",
+    "http-proxy-middleware": "^1.1.0",
+    "node-fetch": "^2.6.1"
+  }
+}
--- a/src/Bindings/ReactBindingHandler.ts
+++ b/src/Bindings/ReactBindingHandler.ts
@@ -22,13 +22,7 @@ export interface ReactAdapter {
 export class Registerer {
  public static register(): void {
    ko.bindingHandlers.react = {
-      init: (
-        element: any,
-        wrappedValueAccessor: () => any,
-        allBindings?: ko.AllBindings,
-        viewModel?: any,
-        bindingContext?: ko.BindingContext
-      ) => {
+      init: (element: any, wrappedValueAccessor: () => any) => {
        const adapter: ReactAdapter = wrappedValueAccessor();

        if (adapter.setElement) {
--- a/src/CellOutputViewer/CellOutputViewer.less
+++ b/src/CellOutputViewer/CellOutputViewer.less
@@ -0,0 +1,15 @@
+.schema-analyzer-cell-outputs {
+  padding: 10px 2px;
+}
+
+// Mimic FluentUI8's DocumentCard style
+.schema-analyzer-cell-output {
+  margin-bottom: 20px;
+  padding: 14px 20px;
+  border: 1px solid rgb(237, 235, 233);
+}
+
+.schema-analyzer-cell-output:hover {
+  border-color: rgb(200, 198, 196);
+  box-shadow: inset 0 0 0 1px rgb(200, 198, 196)
+}
--- a/src/CellOutputViewer/CellOutputViewer.tsx
+++ b/src/CellOutputViewer/CellOutputViewer.tsx
@@ -0,0 +1,104 @@
+import { createImmutableOutput, JSONObject, OnDiskOutput } from "@nteract/commutable";
+// import outputs individually to avoid increasing the bundle size
+import { KernelOutputError } from "@nteract/outputs/lib/components/kernel-output-error";
+import { Output } from "@nteract/outputs/lib/components/output";
+import { StreamText } from "@nteract/outputs/lib/components/stream-text";
+import { ContentRef } from "@nteract/types";
+import "bootstrap/dist/css/bootstrap.css";
+import postRobot from "post-robot";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "../../externals/iframeResizer.contentWindow.min.js"; // Required for iFrameResizer to work
+import { SnapshotRequest } from "../Explorer/Notebook/NotebookComponent/types";
+import "../Explorer/Notebook/NotebookRenderer/base.css";
+import "../Explorer/Notebook/NotebookRenderer/default.css";
+import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
+import "./CellOutputViewer.less";
+import { TransformMedia } from "./TransformMedia";
+
+export interface SnapshotResponse {
+  imageSrc: string;
+  requestId: string;
+}
+export interface CellOutputViewerProps {
+  id: string;
+  contentRef: ContentRef;
+  outputsContainerClassName: string;
+  outputClassName: string;
+  outputs: OnDiskOutput[];
+  onMetadataChange: (metadata: JSONObject, mediaType: string, index?: number) => void;
+}
+
+const onInit = async () => {
+  postRobot.on(
+    "props",
+    {
+      window: window.parent,
+      domain: window.location.origin,
+    },
+    (event) => {
+      // Typescript definition for event is wrong. So read props by casting to <any>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const props = (event as any).data as CellOutputViewerProps;
+      const outputs = (
+        <div data-iframe-height className={props.outputsContainerClassName}>
+          {props.outputs?.map((output, index) => (
+            <div className={props.outputClassName} key={index}>
+              <Output output={createImmutableOutput(output)} key={index}>
+                <TransformMedia
+                  output_type={"display_data"}
+                  id={props.id}
+                  contentRef={props.contentRef}
+                  onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+                />
+                <TransformMedia
+                  output_type={"execute_result"}
+                  id={props.id}
+                  contentRef={props.contentRef}
+                  onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+                />
+                <KernelOutputError />
+                <StreamText />
+              </Output>
+            </div>
+          ))}
+        </div>
+      );
+
+      ReactDOM.render(outputs, document.getElementById("cellOutput"));
+    }
+  );
+
+  postRobot.on(
+    "snapshotRequest",
+    {
+      window: window.parent,
+      domain: window.location.origin,
+    },
+    async (event): Promise<SnapshotResponse> => {
+      const topNode = document.getElementById("cellOutput");
+      if (!topNode) {
+        const errorMsg = "No top node to snapshot";
+        return Promise.reject(new Error(errorMsg));
+      }
+
+      // Typescript definition for event is wrong. So read props by casting to <any>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const snapshotRequest = (event as any).data as SnapshotRequest;
+      const result = await NotebookUtil.takeScreenshotDomToImage(
+        topNode,
+        snapshotRequest.aspectRatio,
+        undefined,
+        snapshotRequest.downloadFilename
+      );
+
+      return {
+        imageSrc: result.imageSrc,
+        requestId: snapshotRequest.requestId,
+      };
+    }
+  );
+};
+
+// Entry point
+window.addEventListener("load", onInit);
--- a/src/CellOutputViewer/TransformMedia.tsx
+++ b/src/CellOutputViewer/TransformMedia.tsx
@@ -0,0 +1,138 @@
+import { ImmutableDisplayData, ImmutableExecuteResult, JSONObject } from "@nteract/commutable";
+// import outputs individually to avoid increasing the bundle size
+import { HTML } from "@nteract/outputs/lib/components/media/html";
+import { Image } from "@nteract/outputs/lib/components/media/image";
+import { JavaScript } from "@nteract/outputs/lib/components/media/javascript";
+import { Json } from "@nteract/outputs/lib/components/media/json";
+import { LaTeX } from "@nteract/outputs/lib/components/media/latex";
+import { Plain } from "@nteract/outputs/lib/components/media/plain";
+import { SVG } from "@nteract/outputs/lib/components/media/svg";
+import { ContentRef } from "@nteract/types";
+import React, { Suspense } from "react";
+
+const EmptyTransform = (): JSX.Element => <></>;
+
+const displayOrder = [
+  "application/vnd.jupyter.widget-view+json",
+  "application/vnd.vega.v5+json",
+  "application/vnd.vega.v4+json",
+  "application/vnd.vega.v3+json",
+  "application/vnd.vega.v2+json",
+  "application/vnd.vegalite.v4+json",
+  "application/vnd.vegalite.v3+json",
+  "application/vnd.vegalite.v2+json",
+  "application/vnd.vegalite.v1+json",
+  "application/geo+json",
+  "application/vnd.plotly.v1+json",
+  "text/vnd.plotly.v1+html",
+  "application/x-nteract-model-debug+json",
+  "application/vnd.dataresource+json",
+  "application/vdom.v1+json",
+  "application/json",
+  "application/javascript",
+  "text/html",
+  "text/markdown",
+  "text/latex",
+  "image/svg+xml",
+  "image/gif",
+  "image/png",
+  "image/jpeg",
+  "text/plain",
+];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const transformsById = new Map<string, React.ComponentType<any>>([
+  ["text/vnd.plotly.v1+html", React.lazy(() => import("@nteract/transform-plotly"))],
+  ["application/vnd.plotly.v1+json", React.lazy(() => import("@nteract/transform-plotly"))],
+  ["application/geo+json", EmptyTransform], // TODO: The geojson transform will likely need some work because of the basemap URL(s)
+  ["application/x-nteract-model-debug+json", React.lazy(() => import("@nteract/transform-model-debug"))],
+  ["application/vnd.dataresource+json", React.lazy(() => import("@nteract/data-explorer"))],
+  ["application/vnd.jupyter.widget-view+json", React.lazy(() => import("./transforms/WidgetDisplay"))],
+  ["application/vnd.vegalite.v1+json", React.lazy(() => import("./transforms/VegaLite1"))],
+  ["application/vnd.vegalite.v2+json", React.lazy(() => import("./transforms/VegaLite2"))],
+  ["application/vnd.vegalite.v3+json", React.lazy(() => import("./transforms/VegaLite3"))],
+  ["application/vnd.vegalite.v4+json", React.lazy(() => import("./transforms/VegaLite4"))],
+  ["application/vnd.vega.v2+json", React.lazy(() => import("./transforms/Vega2"))],
+  ["application/vnd.vega.v3+json", React.lazy(() => import("./transforms/Vega3"))],
+  ["application/vnd.vega.v4+json", React.lazy(() => import("./transforms/Vega4"))],
+  ["application/vnd.vega.v5+json", React.lazy(() => import("./transforms/Vega5"))],
+  ["application/vdom.v1+json", React.lazy(() => import("@nteract/transform-vdom"))],
+  ["application/json", Json],
+  ["application/javascript", JavaScript],
+  ["text/html", HTML],
+  ["text/markdown", React.lazy(() => import("@nteract/outputs/lib/components/media/markdown"))], // Markdown increases the bundle size so lazy load it
+  ["text/latex", LaTeX],
+  ["image/svg+xml", SVG],
+  ["image/gif", Image],
+  ["image/png", Image],
+  ["image/jpeg", Image],
+  ["text/plain", Plain],
+]);
+
+interface TransformMediaProps {
+  output_type: string;
+  id: string;
+  contentRef: ContentRef;
+  output?: ImmutableDisplayData | ImmutableExecuteResult;
+  onMetadataChange: (metadata: JSONObject, mediaType: string) => void;
+}
+
+export const TransformMedia = (props: TransformMediaProps): JSX.Element => {
+  const { Media, mediaType, data, metadata } = getMediaInfo(props);
+
+  // If we had no valid result, return an empty output
+  if (!mediaType || !data) {
+    return <></>;
+  }
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Media
+        onMetadataChange={props.onMetadataChange}
+        data={data}
+        metadata={metadata}
+        contentRef={props.contentRef}
+        id={props.id}
+      />
+    </Suspense>
+  );
+};
+
+const getMediaInfo = (props: TransformMediaProps) => {
+  const { output, output_type } = props;
+  // This component should only be used with display data and execute result
+  if (!output || !(output_type === "display_data" || output_type === "execute_result")) {
+    console.warn("connected transform media managed to get a non media bundle output");
+    return {
+      Media: EmptyTransform,
+    };
+  }
+
+  // Find the first mediaType in the output data that we support with a handler
+  const mediaType = displayOrder.find(
+    (key) =>
+      Object.prototype.hasOwnProperty.call(output.data, key) &&
+      (Object.prototype.hasOwnProperty.call(transformsById, key) || transformsById.get(key))
+  );
+
+  if (mediaType) {
+    const metadata = output.metadata.get(mediaType);
+    const data = output.data[mediaType];
+
+    const Media = transformsById.get(mediaType);
+    return {
+      Media,
+      mediaType,
+      data,
+      metadata,
+    };
+  }
+
+  return {
+    Media: EmptyTransform,
+    mediaType,
+    output,
+  };
+};
+
+export default TransformMedia;
--- a/src/CellOutputViewer/cellOutputViewer.html
+++ b/src/CellOutputViewer/cellOutputViewer.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+    <title>Cell Output Viewer</title>
+  </head>
+
+  <body>
+    <div class="cellOutput" id="cellOutput"></div>
+  </body>
+</html>
--- a/src/CellOutputViewer/transforms/Vega2.ts
+++ b/src/CellOutputViewer/transforms/Vega2.ts
@@ -0,0 +1 @@
+export { Vega2 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/Vega3.ts
+++ b/src/CellOutputViewer/transforms/Vega3.ts
@@ -0,0 +1 @@
+export { Vega3 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/Vega4.ts
+++ b/src/CellOutputViewer/transforms/Vega4.ts
@@ -0,0 +1 @@
+export { Vega4 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/Vega5.ts
+++ b/src/CellOutputViewer/transforms/Vega5.ts
@@ -0,0 +1 @@
+export { Vega5 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/VegaLite1.ts
+++ b/src/CellOutputViewer/transforms/VegaLite1.ts
@@ -0,0 +1 @@
+export { VegaLite1 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/VegaLite2.ts
+++ b/src/CellOutputViewer/transforms/VegaLite2.ts
@@ -0,0 +1 @@
+export { VegaLite2 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/VegaLite3.ts
+++ b/src/CellOutputViewer/transforms/VegaLite3.ts
@@ -0,0 +1 @@
+export { VegaLite3 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/VegaLite4.ts
+++ b/src/CellOutputViewer/transforms/VegaLite4.ts
@@ -0,0 +1 @@
+export { VegaLite4 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/WidgetDisplay.ts
+++ b/src/CellOutputViewer/transforms/WidgetDisplay.ts
@@ -0,0 +1 @@
+export { WidgetDisplay as default } from "@nteract/jupyter-widgets";
--- a/src/Common/ArrayHashMap.ts
+++ b/src/Common/ArrayHashMap.ts
@@ -1,49 +1,9 @@
-import { HashMap } from "./HashMap";
-
 /**
 * Hash map of arrays which allows to:
 * - push an item by key: add to array and create array if needed
 * - remove item by key: remove from array and delete array if needed
 */
-
-export class ArrayHashMap<T> {
-  private store: HashMap<T[]>;
-
-  constructor() {
-    this.store = new HashMap();
-  }
-
-  public has(key: string): boolean {
-    return this.store.has(key);
-  }
-
-  public get(key: string): T[] {
-    return this.store.get(key);
-  }
-
-  public size(): number {
-    return this.store.size();
-  }
-
-  public clear(): void {
-    this.store.clear();
-  }
-
-  public keys(): string[] {
-    return this.store.keys();
-  }
-
-  public delete(key: string): boolean {
-    return this.store.delete(key);
-  }
-
-  public forEach(key: string, iteratorFct: (value: T) => void) {
-    const values = this.store.get(key);
-    if (values) {
-      values.forEach((value) => iteratorFct(value));
-    }
-  }
-
+export class ArrayHashMap<T> extends Map<string, T[]> {
  /**
   * Insert item into array.
   * If no array, create one.
@@ -52,16 +12,8 @@ export class ArrayHashMap<T> {
   * @param item
   */
  public push(key: string, item: T): void {
-    let itemsArray: T[] = this.store.get(key);
-    if (!itemsArray) {
-      itemsArray = [item];
-      this.store.set(key, itemsArray);
-      return;
-    }
-
-    if (itemsArray.indexOf(item) === -1) {
-      itemsArray.push(item);
-    }
+    const array = this.get(key);
+    array ? array.includes(item) || array.push(item) : this.set(key, [item]);
  }

  /**
@@ -70,18 +22,11 @@ export class ArrayHashMap<T> {
   * @param key
   * @param itemToRemove
   */
-  public remove(key: string, itemToRemove: T) {
-    if (!this.store.has(key)) {
-      return;
-    }
-
-    const itemsArray = this.store.get(key);
-    const index = itemsArray.indexOf(itemToRemove);
-    if (index >= 0) {
-      itemsArray.splice(index, 1);
-      if (itemsArray.length === 0) {
-        this.store.delete(key);
-      }
+  public remove(key: string, itemToRemove: T): void {
+    const array = this.get(key);
+    if (array) {
+      const remaining = array.filter((item) => item !== itemToRemove);
+      remaining.length ? this.set(key, remaining) : this.delete(key);
    }
  }
 }
--- a/src/Common/CollapsedResourceTree.tsx
+++ b/src/Common/CollapsedResourceTree.tsx
@@ -0,0 +1,36 @@
+import React, { FunctionComponent } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+import { userContext } from "../UserContext";
+
+export interface CollapsedResourceTreeProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+}
+
+export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+}: CollapsedResourceTreeProps): JSX.Element => {
+  return (
+    <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
+      <div className="main-nav nav">
+        <ul className="nav">
+          <li
+            className="resourceTreeCollapse"
+            id="collapseToggleLeftPaneButton"
+            role="button"
+            tabIndex={0}
+            aria-label="Expand Tree"
+          >
+            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
+              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
+            </span>
+            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
+              <span>{userContext.apiType} API</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -44,7 +44,7 @@ export class ArmResourceTypes {
 }

 export class BackendDefaults {
-  public static partitionKeyKind: string = "Hash";
+  public static partitionKeyKind = "Hash";
  public static singlePartitionStorageInGb: string = "10";
  public static multiPartitionStorageInGb: string = "100";
  public static maxChangeFeedRetentionDuration: number = 10;
@@ -65,28 +65,18 @@ export class ClientDefaults {
  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
 }

-export class AccountKind {
-  public static DocumentDB: string = "DocumentDB";
-  public static MongoDB: string = "MongoDB";
-  public static Parse: string = "Parse";
-  public static GlobalDocumentDB: string = "GlobalDocumentDB";
-  public static Default: string = AccountKind.DocumentDB;
+export enum AccountKind {
+  DocumentDB = "DocumentDB",
+  MongoDB = "MongoDB",
+  Parse = "Parse",
+  GlobalDocumentDB = "GlobalDocumentDB",
+  Default = "DocumentDB",
 }

 export class CorrelationBackend {
  public static Url: string = "https://aka.ms/cosmosdbanalytics";
 }

-export class DefaultAccountExperience {
-  public static DocumentDB: string = "DocumentDB";
-  public static Graph: string = "Graph";
-  public static MongoDB: string = "MongoDB";
-  public static ApiForMongoDB: string = "Azure Cosmos DB for MongoDB API";
-  public static Table: string = "Table";
-  public static Cassandra: string = "Cassandra";
-  public static Default: string = DefaultAccountExperience.DocumentDB;
-}
-
 export class CapabilityNames {
  public static EnableTable: string = "EnableTable";
  public static EnableGremlin: string = "EnableGremlin";
@@ -98,36 +88,13 @@ export class CapabilityNames {
  public static readonly EnableServerless: string = "EnableServerless";
 }

-export class Features {
-  public static readonly cosmosdb = "cosmosdb";
-  public static readonly enableChangeFeedPolicy = "enablechangefeedpolicy";
-  public static readonly executeSproc = "dataexplorerexecutesproc";
-  public static readonly hostedDataExplorer = "hosteddataexplorerenabled";
-  public static readonly enableTtl = "enablettl";
-  public static readonly enableNotebooks = "enablenotebooks";
-  public static readonly enableSpark = "enablespark";
-  public static readonly livyEndpoint = "livyendpoint";
-  public static readonly notebookServerUrl = "notebookserverurl";
-  public static readonly notebookServerToken = "notebookservertoken";
-  public static readonly notebookBasePath = "notebookbasepath";
-  public static readonly canExceedMaximumValue = "canexceedmaximumvalue";
-  public static readonly enableFixedCollectionWithSharedThroughput = "enablefixedcollectionwithsharedthroughput";
-  public static readonly ttl90Days = "ttl90days";
-  public static readonly enableRightPanelV2 = "enablerightpanelv2";
-  public static readonly enableSchema = "enableschema";
-  public static readonly enableSDKoperations = "enablesdkoperations";
-  public static readonly showMinRUSurvey = "showminrusurvey";
-  public static readonly enableDatabaseSettingsTabV1 = "enabledbsettingsv1";
-  public static readonly selfServeType = "selfservetype";
-  public static readonly enableKOPanel = "enablekopanel";
-}
-
 // flight names returned from the portal are always lowercase
 export class Flights {
  public static readonly SettingsV2 = "settingsv2";
  public static readonly MongoIndexEditor = "mongoindexeditor";
  public static readonly MongoIndexing = "mongoindexing";
  public static readonly AutoscaleTest = "autoscaletest";
+  public static readonly PartitionKeyTest = "partitionkeytest";
 }

 export class AfecFeatures {
@@ -191,16 +158,6 @@ export class DocumentsGridMetrics {
  public static DocumentEditorMaxWidthRatio: number = 0.4;
 }

-export class ExplorerMetrics {
-  public static SplitterMinWidth: number = 240;
-  public static SplitterMaxWidth: number = 400;
-  public static CollapsedResourceTreeWidth: number = 36;
-}
-
-export class SplitterMetrics {
-  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
-}
-
 export class Areas {
  public static ResourceTree: string = "Resource Tree";
  public static ContextualPane: string = "Contextual Pane";
--- a/src/Common/CosmosClient.test.ts
+++ b/src/Common/CosmosClient.test.ts
@@ -1,5 +1,5 @@
 import { ResourceType } from "@azure/cosmos/dist-esm/common/constants";
-import { configContext, Platform, updateConfigContext, resetConfigContext } from "../ConfigContext";
+import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
 import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";

@@ -91,7 +91,6 @@ describe("endpoint", () => {
        location: "foo",
        type: "foo",
        kind: "foo",
-        tags: [],
        properties: {
          documentEndpoint: "bar",
          gremlinEndpoint: "foo",
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -1,15 +1,22 @@
 import * as Cosmos from "@azure/cosmos";
 import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
 import { configContext, Platform } from "../ConfigContext";
-import { getErrorMessage } from "./ErrorHandlingUtils";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
-import { userContext } from "../UserContext";
+import { getErrorMessage } from "./ErrorHandlingUtils";

 const _global = typeof self === "undefined" ? window : self;

 export const tokenProvider = async (requestInfo: RequestInfo) => {
  const { verb, resourceId, resourceType, headers } = requestInfo;
+
+  if (userContext.features.enableAadDataPlane && userContext.aadToken) {
+    const AUTH_PREFIX = `type=aad&ver=1.0&sig=`;
+    const authorizationToken = `${AUTH_PREFIX}${userContext.aadToken}`;
+    return authorizationToken;
+  }
+
  if (configContext.platform === Platform.Emulator) {
    // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
    await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
@@ -32,7 +39,7 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {
 };

 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
-  requestContext.endpoint = configContext.PROXY_PATH;
+  requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
  requestContext.headers["x-ms-proxy-target"] = endpoint();
  return next(requestContext);
 };
@@ -43,12 +50,7 @@ export const endpoint = () => {
    const location = _global.parent ? _global.parent.location : _global.location;
    return configContext.EMULATOR_ENDPOINT || location.origin;
  }
-  return (
-    userContext.endpoint ||
-    (userContext.databaseAccount &&
-      userContext.databaseAccount.properties &&
-      userContext.databaseAccount.properties.documentEndpoint)
-  );
+  return userContext.endpoint || userContext?.databaseAccount?.properties?.documentEndpoint;
 };

 export async function getTokenFromAuthService(verb: string, resourceType: string, resourceId?: string): Promise<any> {
@@ -75,7 +77,10 @@ export async function getTokenFromAuthService(verb: string, resourceType: string
  }
 }

+let _client: Cosmos.CosmosClient;
+
 export function client(): Cosmos.CosmosClient {
+  if (_client) return _client;
  const options: Cosmos.CosmosClientOptions = {
    endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
    key: userContext.masterKey,
@@ -89,5 +94,6 @@ export function client(): Cosmos.CosmosClient {
  if (configContext.PROXY_PATH !== undefined) {
    (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
  }
-  return new Cosmos.CosmosClient(options);
+  _client = new Cosmos.CosmosClient(options);
+  return _client;
 }
--- a/src/Common/DatabaseAccountUtility.ts
+++ b/src/Common/DatabaseAccountUtility.ts
@@ -0,0 +1,17 @@
+import { userContext } from "../UserContext";
+
+function isVirtualNetworkFilterEnabled() {
+  return userContext.databaseAccount?.properties?.isVirtualNetworkFilterEnabled;
+}
+
+function isIpRulesEnabled() {
+  return userContext.databaseAccount?.properties?.ipRules?.length > 0;
+}
+
+function isPrivateEndpointConnectionsEnabled() {
+  return userContext.databaseAccount?.properties?.privateEndpointConnections?.length > 0;
+}
+
+export function isPublicInternetAccessAllowed(): boolean {
+  return !isVirtualNetworkFilterEnabled() && !isIpRulesEnabled() && !isPrivateEndpointConnectionsEnabled();
+}
--- a/src/Common/DocumentUtility.ts
+++ b/src/Common/DocumentUtility.ts
@@ -1,8 +1,7 @@
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
 import { userContext } from "../UserContext";

 export const getEntityName = (): string => {
-  if (userContext.defaultExperience === DefaultAccountExperienceType.MongoDB) {
+  if (userContext.apiType === "Mongo") {
    return "document";
  }

--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -0,0 +1,66 @@
+import { DatePicker, TextField } from "@fluentui/react";
+import React, { FunctionComponent } from "react";
+
+export interface TableEntityProps {
+  entityValueLabel?: string;
+  entityValuePlaceholder: string;
+  entityValue: string | Date;
+  isEntityTypeDate: boolean;
+  isEntityValueDisable?: boolean;
+  entityTimeValue: string;
+  entityValueType: string;
+  onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onSelectDate: (date: Date | null | undefined) => void;
+  onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+}
+
+export const EntityValue: FunctionComponent<TableEntityProps> = ({
+  entityValueLabel,
+  entityValuePlaceholder,
+  entityValue,
+  isEntityTypeDate,
+  entityTimeValue,
+  entityValueType,
+  onEntityValueChange,
+  onSelectDate,
+  isEntityValueDisable,
+  onEntityTimeValueChange,
+}: TableEntityProps): JSX.Element => {
+  if (isEntityTypeDate) {
+    return (
+      <>
+        <DatePicker
+          className="addEntityDatePicker"
+          placeholder={entityValuePlaceholder}
+          value={entityValue ? new Date(entityValue) : new Date()}
+          ariaLabel={entityValuePlaceholder}
+          onSelectDate={onSelectDate}
+          disabled={isEntityValueDisable}
+        />
+        <TextField
+          label={entityValueLabel && entityValueLabel}
+          id="entityTimeId"
+          autoFocus
+          type="time"
+          value={entityTimeValue}
+          onChange={onEntityTimeValueChange}
+          disabled={isEntityValueDisable}
+        />
+      </>
+    );
+  }
+
+  return (
+    <TextField
+      label={entityValueLabel && entityValueLabel}
+      className="addEntityTextField"
+      id="entityValueId"
+      autoFocus
+      disabled={isEntityValueDisable}
+      type={entityValueType}
+      placeholder={entityValuePlaceholder}
+      value={typeof entityValue === "string" ? entityValue : ""}
+      onChange={onEntityValueChange}
+    />
+  );
+};
--- a/src/Common/ErrorHandlingUtils.ts
+++ b/src/Common/ErrorHandlingUtils.ts
@@ -1,8 +1,9 @@
-import { ARMError } from "../Utils/arm/request";
-import { HttpStatusCodes } from "./Constants";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { SubscriptionType } from "../Contracts/SubscriptionType";
+import { userContext } from "../UserContext";
+import { ARMError } from "../Utils/arm/request";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import { HttpStatusCodes } from "./Constants";
 import { logError } from "./Logger";
 import { sendMessage } from "./MessageHandler";

@@ -44,7 +45,7 @@ const sendNotificationForError = (errorMessage: string, errorCode: number | stri

 const replaceKnownError = (errorMessage: string): string => {
  if (
-    window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
+    userContext.subscriptionType === SubscriptionType.Internal &&
    errorMessage?.indexOf("SharedOffer is Disabled for your account") >= 0
  ) {
    return "Database throughput is not supported for internal subscriptions.";
--- a/src/Common/HashMap.test.ts
+++ b/src/Common/HashMap.test.ts
@@ -1,70 +0,0 @@
-import { HashMap } from "./HashMap";
-
-describe("HashMap", () => {
-  it("should test if key/val exists", () => {
-    const map = new HashMap<number>();
-    map.set("a", 123);
-
-    expect(map.has("a")).toBe(true);
-    expect(map.has("b")).toBe(false);
-  });
-
-  it("should get object back", () => {
-    const map = new HashMap<string>();
-    map.set("a", "123");
-    map.set("a", "456");
-
-    expect(map.get("a")).toBe("456");
-    expect(map.get("a")).not.toBe("123");
-  });
-
-  it("should return the right size", () => {
-    const map = new HashMap<string>();
-    map.set("a", "123");
-    map.set("b", "456");
-
-    expect(map.size()).toBe(2);
-  });
-
-  it("should be iterable", () => {
-    const map = new HashMap<number>();
-    map.set("a", 1);
-    map.set("b", 10);
-    map.set("c", 100);
-    map.set("d", 1000);
-
-    let i = 0;
-    map.forEach((key: string, value: number) => {
-      i += value;
-    });
-    expect(i).toBe(1111);
-  });
-
-  it("should be deleted", () => {
-    const map = new HashMap<number>();
-    map.set("a", 1);
-    map.set("b", 10);
-
-    expect(map.delete("a")).toBe(true);
-    expect(map.delete("c")).toBe(false);
-    expect(map.has("a")).toBe(false);
-    expect(map.has("b")).toBe(true);
-  });
-
-  it("should clear", () => {
-    const map = new HashMap<number>();
-    map.set("a", 1);
-    map.clear();
-    expect(map.size()).toBe(0);
-    expect(map.has("a")).toBe(false);
-  });
-
-  it("should return all keys", () => {
-    const map = new HashMap<number>();
-    map.set("a", 1);
-    map.set("b", 1);
-    expect(map.keys()).toEqual(["a", "b"]);
-    map.clear();
-    expect(map.keys().length).toBe(0);
-  });
-});
--- a/src/Common/HashMap.ts
+++ b/src/Common/HashMap.ts
@@ -1,45 +0,0 @@
-/**
- * Simple hashmap implementation that doesn't rely on ES6 Map nor polyfills
- */
-export class HashMap<T> {
-  constructor(private container: { [key: string]: T } = {}) {}
-
-  public has(key: string): boolean {
-    return this.container.hasOwnProperty(key);
-  }
-
-  public set(key: string, value: T): void {
-    this.container[key] = value;
-  }
-
-  public get(key: string): T {
-    return this.container[key];
-  }
-
-  public size(): number {
-    return Object.keys(this.container).length;
-  }
-
-  public delete(key: string): boolean {
-    if (this.has(key)) {
-      delete this.container[key];
-      return true;
-    }
-
-    return false;
-  }
-
-  public clear(): void {
-    this.container = {};
-  }
-
-  public keys(): string[] {
-    return Object.keys(this.container);
-  }
-
-  public forEach(iteratorFct: (key: string, value: T) => void) {
-    for (const k in this.container) {
-      iteratorFct(k, this.container[k]);
-    }
-  }
-}
--- a/src/Common/HeadersUtility.test.ts
+++ b/src/Common/HeadersUtility.test.ts
@@ -1,6 +1,6 @@
-import * as HeadersUtility from "./HeadersUtility";
-import { ExplorerSettings } from "../Shared/ExplorerSettings";
+import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+import * as HeadersUtility from "./HeadersUtility";

 describe("Headers Utility", () => {
  describe("shouldEnableCrossPartitionKeyForResourceWithPartitionKey()", () => {
--- a/src/Common/HeadersUtility.ts
+++ b/src/Common/HeadersUtility.ts
@@ -1,28 +1,5 @@
-import * as Constants from "./Constants";
-
 import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";

-// x-ms-resource-quota: databases = 100; collections = 5000; users = 500000; permissions = 2000000;
-export function getQuota(responseHeaders: any): any {
-  return responseHeaders && responseHeaders[Constants.HttpHeaders.resourceQuota]
-    ? parseStringIntoObject(responseHeaders[Constants.HttpHeaders.resourceQuota])
-    : null;
-}
-
 export function shouldEnableCrossPartitionKey(): boolean {
  return LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true";
 }
-
-function parseStringIntoObject(resourceString: string) {
-  var entityObject: any = {};
-
-  if (resourceString) {
-    var entitiesArray: string[] = resourceString.split(";");
-    for (var i: any = 0; i < entitiesArray.length; i++) {
-      var entity: string[] = entitiesArray[i].split("=");
-      entityObject[entity[0]] = entity[1];
-    }
-  }
-
-  return entityObject;
-}
--- a/src/Common/IteratorUtilities.ts
+++ b/src/Common/IteratorUtilities.ts
@@ -1,6 +1,8 @@
 import { QueryResults } from "../Contracts/ViewModels";

 interface QueryResponse {
+  // [Todo] remove any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  resources: any[];
  hasMoreResults: boolean;
  activityId: string;
@@ -16,6 +18,7 @@ export interface MinimalQueryIterator {
 export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex: number): Promise<QueryResults> {
  return documentsIterator.fetchNext().then((response) => {
    const documents = response.resources;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const headers = (response as any).headers || {}; // TODO this is a private key. Remove any
    const itemCount = (documents && documents.length) || 0;
    return {
--- a/src/Common/Logger.ts
+++ b/src/Common/Logger.ts
@@ -1,7 +1,7 @@
-import { sendMessage } from "./MessageHandler";
-import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
-import { appInsights } from "../Shared/appInsights";
 import { SeverityLevel } from "@microsoft/applicationinsights-web";
+import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
+import { trackTrace } from "../Shared/appInsights";
+import { sendMessage } from "./MessageHandler";

 // TODO: Move to a separate Diagnostics folder
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,7 +46,7 @@ function _logEntry(entry: Diagnostics.LogEntry): void {
        return SeverityLevel.Information;
    }
  })(entry.level);
-  appInsights.trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
+  trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
 }

 function _generateLogEntry(
--- a/src/Common/MessageHandler.ts
+++ b/src/Common/MessageHandler.ts
@@ -1,8 +1,8 @@
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 import Q from "q";
 import * as _ from "underscore";
-import * as Constants from "./Constants";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { getDataExplorerWindow } from "../Utils/WindowUtils";
+import * as Constants from "./Constants";

 export interface CachedDataPromise<T> {
  deferred: Q.Deferred<T>;
@@ -48,17 +48,18 @@ export function sendCachedDataMessage<TResponseDataModel>(
 }

 export function sendMessage(data: any): void {
-  if (canSendMessage()) {
-    // We try to find data explorer window first, then fallback to current window
-    const portalChildWindow = getDataExplorerWindow(window) || window;
-    portalChildWindow.parent.postMessage(
-      {
-        signature: "pcIframe",
-        data: data,
-      },
-      portalChildWindow.document.referrer
-    );
-  }
+  _sendMessage({
+    signature: "pcIframe",
+    data: data,
+  });
+}
+
+export function sendReadyMessage(): void {
+  _sendMessage({
+    signature: "pcIframe",
+    kind: "ready",
+    data: "ready",
+  });
 }

 export function canSendMessage(): boolean {
@@ -74,3 +75,17 @@ export function runGarbageCollector() {
    }
  });
 }
+
+const _sendMessage = (message: any): void => {
+  if (canSendMessage()) {
+    // Portal window can receive messages from only child windows
+    const portalChildWindow = getDataExplorerWindow(window) || window;
+    if (portalChildWindow === window) {
+      // Current window is a child of portal, send message to portal window
+      portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer || "*");
+    } else {
+      // Current window is not a child of portal, send message to the child window instead (which is data explorer)
+      portalChildWindow.postMessage(message, portalChildWindow.location.origin || "*");
+    }
+  }
+};
--- a/src/Common/MongoProxyClient.test.ts
+++ b/src/Common/MongoProxyClient.test.ts
@@ -5,7 +5,6 @@ import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import { updateUserContext } from "../UserContext";
 import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
-jest.mock("../ResourceProvider/ResourceProviderClient.ts");

 const databaseId = "testDB";

--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -5,11 +5,10 @@ import { configContext } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { userContext } from "../UserContext";
+import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { MinimalQueryIterator } from "./IteratorUtilities";
 import { sendMessage } from "./MessageHandler";

@@ -62,7 +61,7 @@ export function queryDocuments(
  query: string,
  continuationToken?: string
 ): Promise<QueryResponse> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const params = {
    db: databaseId,
@@ -112,7 +111,7 @@ export function queryDocuments(
          headers: response.headers,
        };
      }
-      errorHandling(response, "querying documents", params);
+      await errorHandling(response, "querying documents", params);
      return undefined;
    });
 }
@@ -122,7 +121,7 @@ export function readDocument(
  collection: Collection,
  documentId: DocumentId
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const idComponents = documentId.self.split("/");
  const path = idComponents.slice(0, 4).join("/");
@@ -154,11 +153,11 @@ export function readDocument(
        ),
      },
    })
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return response.json();
      }
-      return errorHandling(response, "reading document", params);
+      return await errorHandling(response, "reading document", params);
    });
 }

@@ -168,7 +167,7 @@ export function createDocument(
  partitionKeyProperty: string,
  documentContent: unknown
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const params = {
    db: databaseId,
@@ -193,11 +192,11 @@ export function createDocument(
        ...authHeaders(),
      },
    })
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return response.json();
      }
-      return errorHandling(response, "creating document", params);
+      return await errorHandling(response, "creating document", params);
    });
 }

@@ -207,7 +206,7 @@ export function updateDocument(
  documentId: DocumentId,
  documentContent: string
 ): Promise<DataModels.DocumentId> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const idComponents = documentId.self.split("/");
  const path = idComponents.slice(0, 5).join("/");
@@ -239,16 +238,16 @@ export function updateDocument(
        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
      },
    })
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return response.json();
      }
-      return errorHandling(response, "updating document", params);
+      return await errorHandling(response, "updating document", params);
    });
 }

 export function deleteDocument(databaseId: string, collection: Collection, documentId: DocumentId): Promise<void> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const resourceEndpoint = databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint;
  const idComponents = documentId.self.split("/");
  const path = idComponents.slice(0, 5).join("/");
@@ -279,18 +278,18 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
      },
    })
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return undefined;
      }
-      return errorHandling(response, "deleting document", params);
+      return await errorHandling(response, "deleting document", params);
    });
 }

 export function createMongoCollectionWithProxy(
  params: DataModels.CreateCollectionParams
 ): Promise<DataModels.Collection> {
-  const databaseAccount = userContext.databaseAccount;
+  const { databaseAccount } = userContext;
  const shardKey: string = params.partitionKey?.paths[0];
  const mongoParams: DataModels.MongoParameters = {
    resourceUrl: databaseAccount.properties.mongoEndpoint || databaseAccount.properties.documentEndpoint,
@@ -326,11 +325,11 @@ export function createMongoCollectionWithProxy(
        },
      }
    )
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return response.json();
      }
-      return errorHandling(response, "creating collection", mongoParams);
+      return await errorHandling(response, "creating collection", mongoParams);
    });
 }

@@ -348,10 +347,7 @@ export function getEndpoint(): string {
 async function errorHandling(response: Response, action: string, params: unknown): Promise<void> {
  const errorMessage = await response.text();
  // Log the error where the user can see it
-  NotificationConsoleUtils.logConsoleMessage(
-    ConsoleDataType.Error,
-    `Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`
-  );
+  logConsoleError(`Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`);
  if (response.status === HttpStatusCodes.Forbidden) {
    sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
    return;
--- a/src/Common/ObjectCache.test.ts
+++ b/src/Common/ObjectCache.test.ts
@@ -7,7 +7,7 @@ describe("Object cache", () => {
    cache.set("b", 2);
    cache.set("c", 3);
    cache.set("d", 4);
-    expect(cache.size()).toBe(2);
+    expect(cache.size).toBe(2);
  });

  it("should remove first added element to keep size at limit", () => {
--- a/src/Common/ObjectCache.ts
+++ b/src/Common/ObjectCache.ts
@@ -1,56 +1,27 @@
-import { HashMap } from "./HashMap";
-
-export class ObjectCache<T> extends HashMap<T> {
-  private keyQueue: string[]; // Last touched key FIFO to purge cache if too big.
-  private maxNbElements: number;
-
-  public constructor(maxNbElements: number) {
+export class ObjectCache<T> extends Map<string, T> {
+  constructor(private limit: number) {
    super();
-    this.keyQueue = [];
-    this.maxNbElements = maxNbElements;
-    this.clear();
  }

-  public clear(): void {
-    super.clear();
-    this.keyQueue = [];
+  public get(key: string): T | undefined {
+    return this.touch(key);
  }

-  public get(key: string): T {
-    this.markKeyAsTouched(key);
-    return super.get(key);
-  }
-
-  public set(key: string, value: T): void {
-    super.set(key, value);
-
-    this.markKeyAsTouched(key);
-
-    if (super.size() > this.maxNbElements && key !== this.keyQueue[0]) {
-      this.reduceCacheSize();
+  public set(key: string, value: T): this {
+    if (this.size === this.limit) {
+      this.delete(this.keys().next().value);
    }
+
+    return this.touch(key, value), this;
  }

-  /**
-   * Invalidate elements to keep the total number below the limit
-   */
-  private reduceCacheSize(): void {
-    // remove a key
-    const oldKey = this.keyQueue.shift();
-    if (oldKey) {
-      super.delete(oldKey);
+  private touch(key: string, value = super.get(key)) {
+    // Map keeps (re) insertion order according to ES6 spec
+    if (value) {
+      this.delete(key);
+      super.set(key, value);
    }
-  }

-  /**
-   * Bubble up this key as new.
-   * @param key
-   */
-  private markKeyAsTouched(key: string) {
-    const n = this.keyQueue.indexOf(key);
-    if (n > -1) {
-      this.keyQueue.splice(n, 1);
-    }
-    this.keyQueue.push(key);
+    return value;
  }
 }
--- a/src/Common/PortalNotifications.ts
+++ b/src/Common/PortalNotifications.ts
@@ -1,8 +1,8 @@
+import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
-import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 import { userContext } from "../UserContext";
-import { configContext, Platform } from "../ConfigContext";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";

 const notificationsPath = () => {
  switch (configContext.platform) {
@@ -20,9 +20,7 @@ export const fetchPortalNotifications = async (): Promise<DataModels.Notificatio
    return [];
  }

-  const databaseAccount = userContext.databaseAccount;
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
+  const { databaseAccount, resourceGroup, subscriptionId } = userContext;
  const url = `${configContext.BACKEND_ENDPOINT}${notificationsPath()}?accountName=${
    databaseAccount.name
  }&subscriptionId=${subscriptionId}&resourceGroup=${resourceGroup}`;
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -1,25 +1,23 @@
-import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { QueryUtils } from "../Utils/QueryUtils";
-import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
+import { useDatabases } from "../Explorer/useDatabases";
 import { userContext } from "../UserContext";
-import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { createCollection } from "./dataAccess/createCollection";
-import { handleError } from "./ErrorHandlingUtils";
 import { createDocument } from "./dataAccess/createDocument";
 import { deleteDocument } from "./dataAccess/deleteDocument";
 import { queryDocuments } from "./dataAccess/queryDocuments";
+import { handleError } from "./ErrorHandlingUtils";

 export class QueriesClient {
  private static readonly PartitionKey: DataModels.PartitionKey = {
    paths: [`/${SavedQueries.PartitionKeyProperty}`],
-    kind: BackendDefaults.partitionKeyKind,
+    kind: "Hash",
    version: BackendDefaults.partitionKeyVersion,
  };
  private static readonly FetchQuery: string = "SELECT * FROM c";
@@ -100,45 +98,35 @@ export class QueriesClient {

    const options: any = { enableCrossPartitionQuery: true };
    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Fetching saved queries");
-    const queryIterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+    const results = await queryDocuments(
      SavedQueries.DatabaseName,
      SavedQueries.CollectionName,
      this.fetchQueriesQuery(),
      options
-    );
-    const fetchQueries = async (firstItemIndex: number): Promise<ViewModels.QueryResults> =>
-      await queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex);
-    return QueryUtils.queryAllPages(fetchQueries)
-      .then(
-        (results: ViewModels.QueryResults) => {
-          let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
-            if (!document) {
-              return undefined;
-            }
-            const { id, resourceId, query, queryName } = document;
-            const parsedQuery: DataModels.Query = {
-              resourceId: resourceId,
-              queryName: queryName,
-              query: query,
-              id: id,
-            };
-            try {
-              this.validateQuery(parsedQuery);
-              return parsedQuery;
-            } catch (error) {
-              return undefined;
-            }
-          });
-          queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
-          NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
-          return Promise.resolve(queries);
-        },
-        (error: any) => {
-          handleError(error, "getSavedQueries", "Failed to fetch saved queries");
-          return Promise.reject(error);
-        }
-      )
-      .finally(() => clearMessage());
+    ).fetchAll();
+
+    let queries: DataModels.Query[] = _.map(results.resources, (document: DataModels.Query) => {
+      if (!document) {
+        return undefined;
+      }
+      const { id, resourceId, query, queryName } = document;
+      const parsedQuery: DataModels.Query = {
+        resourceId: resourceId,
+        queryName: queryName,
+        query: query,
+        id: id,
+      };
+      try {
+        this.validateQuery(parsedQuery);
+        return parsedQuery;
+      } catch (error) {
+        return undefined;
+      }
+    });
+    queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
+    NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
+    clearMessage();
+    return queries;
  }

  public async deleteQuery(query: DataModels.Query): Promise<void> {
@@ -182,17 +170,14 @@ export class QueriesClient {
  }

  public getResourceId(): string {
-    const databaseAccount = userContext.databaseAccount;
-    const databaseAccountName = (databaseAccount && databaseAccount.name) || "";
-    const subscriptionId = userContext.subscriptionId || "";
-    const resourceGroup = userContext.resourceGroup || "";
-
+    const { databaseAccount, subscriptionId = "", resourceGroup = "" } = userContext;
+    const databaseAccountName = databaseAccount?.name || "";
    return `/subscriptions/${subscriptionId}/resourceGroups/${resourceGroup}/providers/Microsoft.DocumentDb/databaseAccounts/${databaseAccountName}`;
  }

  private findQueriesCollection(): ViewModels.Collection {
    const queriesDatabase: ViewModels.Database = _.find(
-      this.container.databases(),
+      useDatabases.getState().databases,
      (database: ViewModels.Database) => database.id() === SavedQueries.DatabaseName
    );
    if (!queriesDatabase) {
@@ -211,7 +196,7 @@ export class QueriesClient {
  }

  private fetchQueriesQuery(): string {
-    if (this.container.isPreferredApiMongoDB()) {
+    if (userContext.apiType === "Mongo") {
      return QueriesClient.FetchMongoQuery;
    }
    return QueriesClient.FetchQuery;
--- a/src/Common/ResourceTreeContainer.tsx
+++ b/src/Common/ResourceTreeContainer.tsx
@@ -0,0 +1,66 @@
+import React, { FunctionComponent } from "react";
+import arrowLeftImg from "../../images/imgarrowlefticon.svg";
+import refreshImg from "../../images/refresh-cosmos.svg";
+import { AuthType } from "../AuthType";
+import Explorer from "../Explorer/Explorer";
+import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
+import { ResourceTree } from "../Explorer/Tree/ResourceTree";
+import { userContext } from "../UserContext";
+
+export interface ResourceTreeContainerProps {
+  toggleLeftPaneExpanded: () => void;
+  isLeftPaneExpanded: boolean;
+  container: Explorer;
+}
+
+export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps> = ({
+  toggleLeftPaneExpanded,
+  isLeftPaneExpanded,
+  container,
+}: ResourceTreeContainerProps): JSX.Element => {
+  return (
+    <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
+      {/* Collections Window - - Start */}
+      <div id="mainslide" className="flexContainer">
+        {/* Collections Window Title/Command Bar - Start */}
+        <div className="collectiontitle">
+          <div className="coltitle">
+            <span className="titlepadcol">{userContext.apiType} API</span>
+            <div className="float-right">
+              <span
+                className="padimgcolrefresh"
+                data-test="refreshTree"
+                role="button"
+                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
+                tabIndex={0}
+                aria-label="Refresh tree"
+                title="Refresh tree"
+              >
+                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
+              </span>
+              <span
+                className="padimgcolrefresh1"
+                id="expandToggleLeftPaneButton"
+                role="button"
+                onClick={toggleLeftPaneExpanded}
+                tabIndex={0}
+                aria-label="Collapse Tree"
+                title="Collapse Tree"
+              >
+                <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
+              </span>
+            </div>
+          </div>
+        </div>
+        {userContext.authType === AuthType.ResourceToken ? (
+          <ResourceTokenTree />
+        ) : userContext.features.enableKOResourceTree ? (
+          <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
+        ) : (
+          <ResourceTree container={container} />
+        )}
+      </div>
+      {/*  Collections Window - End */}
+    </div>
+  );
+};
--- a/src/Common/Splitter.ts
+++ b/src/Common/Splitter.ts
@@ -1,7 +1,3 @@
-import * as ko from "knockout";
-
-import { SplitterMetrics } from "./Constants";
-
 export enum SplitterDirection {
  Horizontal = "horizontal",
  Vertical = "vertical",
@@ -28,14 +24,12 @@ export class Splitter {
  public lastX!: number;
  public lastWidth!: number;

-  private isCollapsed: ko.Observable<boolean>;
  private bounds: SplitterBounds;
  private direction: SplitterDirection;

  constructor(options: SplitterOptions) {
    this.splitterId = options.splitterId;
    this.leftSideId = options.leftId;
-    this.isCollapsed = ko.observable<boolean>(false);
    this.bounds = options.bounds;
    this.direction = options.direction;
    this.initialize();
@@ -73,7 +67,7 @@ export class Splitter {
    $(this.leftSide).resizable(splitterOptions);
  }

-  private onResizeStart: JQueryUI.ResizableEvent = (e: Event, ui: JQueryUI.ResizableUIParams) => {
+  private onResizeStart: JQueryUI.ResizableEvent = () => {
    if (this.direction === SplitterDirection.Vertical) {
      $(".ui-resizable-helper").height("100%");
    } else {
@@ -82,26 +76,5 @@ export class Splitter {
    $("iframe").css("pointer-events", "none");
  };

-  private onResizeStop: JQueryUI.ResizableEvent = (e: Event, ui: JQueryUI.ResizableUIParams) => {
-    $("iframe").css("pointer-events", "auto");
-  };
-
-  public collapseLeft() {
-    this.lastX = $(this.splitter).position().left;
-    this.lastWidth = $(this.leftSide).width();
-    $(this.splitter).css("left", SplitterMetrics.CollapsedPositionLeft);
-    $(this.leftSide).css("width", "");
-    $(this.leftSide).resizable("option", "disabled", true).removeClass("ui-resizable-disabled"); // remove class so splitter is visible
-    $(this.splitter).removeClass("ui-resizable-e");
-    this.isCollapsed(true);
-  }
-
-  public expandLeft() {
-    $(this.splitter).addClass("ui-resizable-e");
-    $(this.leftSide).css("width", this.lastWidth);
-    $(this.splitter).css("left", this.lastX);
-    $(this.splitter).css("left", ""); // this ensures the splitter's position is not fixed and enables movement during resizing
-    $(this.leftSide).resizable("enable");
-    this.isCollapsed(false);
-  }
+  private onResizeStop: JQueryUI.ResizableEvent = () => $("iframe").css("pointer-events", "auto");
 }
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)`
				`@@ -0,0 +1 @@`
				`export { Vega2 as default } from "@nteract/transform-vega";`
				`@@ -0,0 +1 @@`
				`export { Vega3 as default } from "@nteract/transform-vega";`
				`@@ -0,0 +1 @@`
				`export { Vega4 as default } from "@nteract/transform-vega";`
				`@@ -0,0 +1 @@`
				`export { Vega5 as default } from "@nteract/transform-vega";`
				`@@ -0,0 +1 @@`
				`export { VegaLite1 as default } from "@nteract/transform-vega";`
				`@@ -0,0 +1 @@`
				`export { VegaLite2 as default } from "@nteract/transform-vega";`
				`@@ -0,0 +1 @@`
				`export { VegaLite3 as default } from "@nteract/transform-vega";`
				`@@ -0,0 +1 @@`
				`export { VegaLite4 as default } from "@nteract/transform-vega";`
				`@@ -0,0 +1 @@`
				`export { WidgetDisplay as default } from "@nteract/jupyter-widgets";`