retold-data-service 2.1.1 → 2.1.5

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-Shell.js

@@ -0,0 +1,142 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class ComprehensionLoaderShellView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+		this._shellPanelsBuilt = false;
+	}
+
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		if (!this._shellPanelsBuilt)
+		{
+			this._buildShell();
+			this._shellPanelsBuilt = true;
+		}
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+
+	_buildShell()
+	{
+		let tmpModal = this.pict.views['Pict-Section-Modal'];
+		let tmpMount = document.getElementById('ComprehensionLoader-Shell-Mount');
+		if (!tmpModal || typeof tmpModal.shell !== 'function' || !tmpMount)
+		{
+			this.log.warn('ComprehensionLoader-Shell: Pict-Section-Modal or mount not available; shell not built.');
+			return;
+		}
+
+		this._shell = tmpModal.shell(tmpMount, { PersistenceKey: 'comprehension-loader-shell' });
+
+		// Top — Theme-TopBar (BrandMark + Nav + User slots)
+		this._shell.addPanel({
+			Hash: 'topbar', Side: 'top', Mode: 'fixed', Size: 56,
+			ContentDestinationId: 'Theme-TopBar', ContentView: 'Theme-TopBar'
+		});
+
+		// Bottom — Theme-BottomBar (StatusView slot)
+		this._shell.addPanel({
+			Hash: 'bottombar', Side: 'bottom', Mode: 'fixed', Size: 36,
+			ContentDestinationId: 'Theme-BottomBar', ContentView: 'Theme-BottomBar'
+		});
+
+		// Bottom (hidden overlay) — status detail expansion
+		this._shell.addPanel({
+			Hash: 'status-detail', Side: 'bottom', Mode: 'resizable', Position: 'overlay',
+			Size: 320, MinSize: 200, MaxSize: 480,
+			Hidden: true, Collapsed: true, Title: 'Status Detail',
+			ContentDestinationId: 'ComprehensionLoader-StatusDetail-Panel',
+			ContentView: 'ComprehensionLoader-StatusDetail'
+		});
+
+		// Right (hidden overlay) — settings
+		this._shell.addPanel({
+			Hash: 'settings', Side: 'right', Mode: 'resizable', Position: 'overlay',
+			Size: 360, MinSize: 280, MaxSize: 540,
+			Hidden: true, Collapsed: true, Title: 'Settings',
+			ContentDestinationId: 'ComprehensionLoader-Settings-Panel',
+			ContentView: 'ComprehensionLoader-SettingsPanel'
+		});
+
+		// Center — the workspace (existing Layout renders here)
+		this._shell.center({ ContentDestinationId: 'ComprehensionLoader-Workspace' });
+	}
+
+	getSettingsPanel()     { return this._shell ? this._shell.getPanel('settings')      : null; }
+	getStatusDetailPanel() { return this._shell ? this._shell.getPanel('status-detail') : null; }
+
+	toggleSettingsPanel()
+	{
+		let tmpPanel = this.getSettingsPanel();
+		if (tmpPanel) { tmpPanel.toggle(); }
+	}
+
+	toggleStatusDetail()
+	{
+		let tmpPanel = this.getStatusDetailPanel();
+		if (!tmpPanel) { return; }
+		tmpPanel.toggle();
+
+		// Notify the provider so it can start/stop the higher-frequency detail poll.
+		let tmpProvider = this.pict.providers.ComprehensionLoader;
+		let tmpOpen = !tmpPanel.Collapsed;
+		if (tmpProvider && tmpOpen && typeof tmpProvider.onStatusDetailExpanded === 'function')
+		{
+			tmpProvider.onStatusDetailExpanded();
+		}
+		else if (tmpProvider && !tmpOpen && typeof tmpProvider.onStatusDetailCollapsed === 'function')
+		{
+			tmpProvider.onStatusDetailCollapsed();
+		}
+	}
+
+	renderTopBar()
+	{
+		let tmpNav  = this.pict.views['ComprehensionLoader-TopBar-Nav'];
+		let tmpUser = this.pict.views['ComprehensionLoader-TopBar-User'];
+		if (tmpNav)  { tmpNav.render();  }
+		if (tmpUser) { tmpUser.render(); }
+	}
+}
+
+module.exports = ComprehensionLoaderShellView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-Shell',
+	DefaultRenderable:         'ComprehensionLoader-Shell',
+	DefaultDestinationAddress: '#ComprehensionLoader-Application-Container',
+	AutoRender:                false,
+	CSS: /*css*/`
+		html, body { height: 100%; margin: 0; padding: 0; }
+		body {
+			background:  var(--theme-color-background-primary,   #f5f5f5);
+			color:       var(--theme-color-text-primary,         #333333);
+			font-family: var(--theme-typography-family-sans,
+				-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
+		}
+		#ComprehensionLoader-Application-Container { height: 100%; min-height: 0; overflow: hidden; }
+		.pict-modal-shell-host    { height: 100%; }
+		.pict-modal-shell         { background: var(--theme-color-background-primary, #f5f5f5); }
+		.pict-modal-shell-panel   { background: var(--theme-color-background-panel,   #ffffff); }
+		.pict-modal-shell-center  {
+			background: var(--theme-color-background-primary, #f5f5f5);
+			overflow: auto;
+			padding: 20px;
+		}
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-Shell',
+		Template: /*html*/`<div id="ComprehensionLoader-Shell-Mount" style="height:100%"></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-Shell',
+		TemplateHash:       'ComprehensionLoader-Shell',
+		DestinationAddress: '#ComprehensionLoader-Application-Container'
+	}]
+};

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-Source.js

@@ -189,8 +189,8 @@ class ComprehensionLoaderSourceView extends libPictView
 		if (!tmpContainer) return;
 
 		let tmpHtml = '<table style="width:100%; border-collapse:collapse; margin-top:8px; font-size:0.9em">';
-		tmpHtml += '<thead><tr><th style="text-align:left; padding:6px 12px; border-bottom:2px solid #ddd">Entity</th>';
-		tmpHtml += '<th style="text-align:right; padding:6px 12px; border-bottom:2px solid #ddd">Records</th></tr></thead>';
+		tmpHtml += '<thead><tr><th style="text-align:left; padding:6px 12px; border-bottom:2px solid var(--theme-color-border-default, #ddd)">Entity</th>';
+		tmpHtml += '<th style="text-align:right; padding:6px 12px; border-bottom:2px solid var(--theme-color-border-default, #ddd)">Records</th></tr></thead>';
 		tmpHtml += '<tbody>';
 
 		let tmpEntityList = pResult.EntityList || [];
@@ -200,8 +200,8 @@ class ComprehensionLoaderSourceView extends libPictView
 			let tmpName = tmpEntityList[i];
 			let tmpCount = tmpRecordCounts[tmpName] || 0;
 			tmpHtml += '<tr>';
-			tmpHtml += '<td style="padding:4px 12px; border-bottom:1px solid #f0f0f0">' + this.pict.providers.ComprehensionLoader.escapeHtml(tmpName) + '</td>';
-			tmpHtml += '<td style="padding:4px 12px; border-bottom:1px solid #f0f0f0; text-align:right; font-variant-numeric:tabular-nums">' + this.pict.providers.ComprehensionLoader.formatNumber(tmpCount) + '</td>';
+			tmpHtml += '<td style="padding:4px 12px; border-bottom:1px solid var(--theme-color-background-tertiary, #f0f0f0)">' + this.pict.providers.ComprehensionLoader.escapeHtml(tmpName) + '</td>';
+			tmpHtml += '<td style="padding:4px 12px; border-bottom:1px solid var(--theme-color-background-tertiary, #f0f0f0); text-align:right; font-variant-numeric:tabular-nums">' + this.pict.providers.ComprehensionLoader.formatNumber(tmpCount) + '</td>';
 			tmpHtml += '</tr>';
 		}
 
@@ -287,11 +287,11 @@ module.exports.default_configuration =
 				<div style="display:flex; gap:16px; align-items:center">
 					<label style="font-weight:normal; margin:0; cursor:pointer">
 						<input type="radio" name="comprehensionSourceMode" id="sourceMode_url" value="url" checked onchange="pict.views['ComprehensionLoader-Source'].onSourceModeChange()"> URL
-						<span style="color:#888; font-size:0.85em">(fetch from a URL)</span>
+						<span style="color:var(--theme-color-text-muted, #888); font-size:0.85em">(fetch from a URL)</span>
 					</label>
 					<label style="font-weight:normal; margin:0; cursor:pointer">
 						<input type="radio" name="comprehensionSourceMode" id="sourceMode_file" value="file" onchange="pict.views['ComprehensionLoader-Source'].onSourceModeChange()"> File Upload
-						<span style="color:#888; font-size:0.85em">(load JSON from local files)</span>
+						<span style="color:var(--theme-color-text-muted, #888); font-size:0.85em">(load JSON from local files)</span>
 					</label>
 				</div>
 			</div>
@@ -305,7 +305,7 @@ module.exports.default_configuration =
 			<div id="sourceFileSection" style="display:none">
 				<label for="comprehensionFiles">Comprehension JSON File(s)</label>
 				<input type="file" id="comprehensionFiles" multiple accept=".json" style="margin-bottom:10px">
-				<div style="font-size:0.8em; color:#888; margin-bottom:10px">Multiple files will be merged (entity keys combined).</div>
+				<div style="font-size:0.8em; color:var(--theme-color-text-muted, #888); margin-bottom:10px">Multiple files will be merged (entity keys combined).</div>
 				<button class="primary" onclick="pict.views['ComprehensionLoader-Source'].loadFromFiles()">Load Files</button>
 			</div>
 

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-StatusBar.js

@@ -0,0 +1,125 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+/**
+ * StatusBar — renders into Theme-BottomBar's #Theme-BottomBar-Status slot.
+ *
+ * Markup preserves the same element ids (#liveStatusBar, #liveStatusMessage,
+ * #liveStatusMeta, #liveStatusProgressFill) that the provider's existing
+ * renderLiveStatus() poll handler manipulates by id — so the provider's
+ * imperative DOM update flow keeps working untouched.
+ */
+class ComprehensionLoaderStatusBarView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = ComprehensionLoaderStatusBarView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-StatusBar',
+	DefaultRenderable:         'ComprehensionLoader-StatusBar',
+	DefaultDestinationAddress: '#Theme-BottomBar-Status',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-status-bar {
+			display: flex; align-items: center; gap: 12px;
+			height: 100%; padding: 0 12px;
+			color: var(--theme-color-text-primary, #333333);
+			font-size: 0.88em;
+			border-top: 1px solid var(--theme-color-border-light, #e9e9e9);
+			border-left: 3px solid var(--theme-color-text-secondary, #6c757d);
+			position: relative;
+		}
+		.rds-status-bar.phase-idle         { border-left-color: var(--theme-color-text-secondary, #6c757d); }
+		.rds-status-bar.phase-disconnected { border-left-color: var(--theme-color-status-error,   #dc3545); }
+		.rds-status-bar.phase-ready        { border-left-color: var(--theme-color-brand-primary,  #4a90d9); }
+		.rds-status-bar.phase-loading      { border-left-color: var(--theme-color-status-success, #28a745); }
+		.rds-status-bar.phase-stopping     { border-left-color: var(--theme-color-status-warning, #ffc107); }
+		.rds-status-bar.phase-complete     { border-left-color: var(--theme-color-status-success, #28a745); }
+
+		.rds-status-dot {
+			width: 10px; height: 10px; border-radius: 50%;
+			flex-shrink: 0;
+			background: var(--theme-color-text-secondary, #6c757d);
+		}
+		.rds-status-bar.phase-idle         .rds-status-dot { background: var(--theme-color-text-secondary, #6c757d); }
+		.rds-status-bar.phase-disconnected .rds-status-dot { background: var(--theme-color-status-error,   #dc3545); }
+		.rds-status-bar.phase-ready        .rds-status-dot { background: var(--theme-color-brand-primary,  #4a90d9); }
+		.rds-status-bar.phase-loading      .rds-status-dot {
+			background: var(--theme-color-status-success, #28a745);
+			animation: rds-status-pulse 1.5s ease-in-out infinite;
+		}
+		.rds-status-bar.phase-stopping     .rds-status-dot {
+			background: var(--theme-color-status-warning, #ffc107);
+			animation: rds-status-pulse 0.8s ease-in-out infinite;
+		}
+		.rds-status-bar.phase-complete     .rds-status-dot { background: var(--theme-color-status-success, #28a745); }
+
+		@keyframes rds-status-pulse {
+			0%, 100% { opacity: 1; transform: scale(1); }
+			50%      { opacity: 0.4; transform: scale(0.8); }
+		}
+
+		.rds-status-message { flex: 1; line-height: 1.2; }
+		.rds-status-meta {
+			display: flex; gap: 12px; flex-shrink: 0;
+			font-size: 0.92em; color: var(--theme-color-text-secondary, #666);
+		}
+		.rds-status-meta .live-status-meta-item { white-space: nowrap; }
+		.rds-status-meta .live-status-meta-item strong { color: var(--theme-color-text-primary, #333); }
+
+		.rds-status-detail-btn {
+			padding: 2px 8px;
+			background: transparent;
+			border: 1px solid var(--theme-color-border-default, #ccc);
+			border-radius: 3px;
+			color: var(--theme-color-text-secondary, #666);
+			cursor: pointer;
+			font-size: 0.92em;
+			line-height: 1;
+		}
+		.rds-status-detail-btn:hover {
+			background: var(--theme-color-background-hover, #f0f0f0);
+			color: var(--theme-color-text-primary, #333);
+		}
+
+		.rds-status-progress-bar {
+			position: absolute; left: 0; right: 0; bottom: 0;
+			height: 2px;
+			background: var(--theme-color-background-tertiary, #e9ecef);
+			overflow: hidden;
+		}
+		.rds-status-progress-fill {
+			height: 100%;
+			background: var(--theme-color-status-success, #28a745);
+			transition: width 1s ease;
+		}
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-StatusBar',
+		Template: /*html*/`
+<div id="liveStatusBar" class="rds-status-bar phase-idle">
+	<div class="rds-status-dot live-status-dot"></div>
+	<div id="liveStatusMessage" class="rds-status-message live-status-message">Idle</div>
+	<div id="liveStatusMeta" class="rds-status-meta live-status-meta"></div>
+	<button class="rds-status-detail-btn"
+		onclick="_Pict.views['ComprehensionLoader-Shell'].toggleStatusDetail()"
+		title="Show detail">Detail</button>
+	<div class="rds-status-progress-bar live-status-progress-bar">
+		<div id="liveStatusProgressFill" class="rds-status-progress-fill live-status-progress-fill" style="width:0%"></div>
+	</div>
+</div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-StatusBar',
+		TemplateHash:       'ComprehensionLoader-StatusBar',
+		DestinationAddress: '#Theme-BottomBar-Status'
+	}]
+};

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-StatusDetail.js

@@ -0,0 +1,89 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+/**
+ * StatusDetail — content for the expandable bottom overlay panel.
+ *
+ * Renders the throughput histogram slot and the running-ops / completed-ops /
+ * errors detail container, both of which the existing provider populates by
+ * direct DOM manipulation. The element ids (#X-Throughput-Histogram,
+ * #X-StatusDetail-Container) are preserved so the provider keeps working.
+ */
+class ComprehensionLoaderStatusDetailView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = ComprehensionLoaderStatusDetailView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-StatusDetail',
+	DefaultRenderable:         'ComprehensionLoader-StatusDetail',
+	DefaultDestinationAddress: '#ComprehensionLoader-StatusDetail-Panel',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-status-detail-body {
+			padding: 12px 20px 16px;
+			max-height: 100%;
+			overflow-y: auto;
+			color: var(--theme-color-text-primary, #333);
+		}
+		.rds-status-detail-section { margin-bottom: 14px; }
+		.rds-status-detail-section:last-child { margin-bottom: 0; }
+		.rds-status-detail-section-title {
+			font-size: 0.85em; font-weight: 600;
+			color: var(--theme-color-text-secondary, #555);
+			text-transform: uppercase; letter-spacing: 0.5px;
+			margin-bottom: 8px; padding-bottom: 4px;
+			border-bottom: 1px solid var(--theme-color-border-light, #eee);
+		}
+		.running-op-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 0.9em; }
+		.running-op-name { font-weight: 600; min-width: 180px; }
+		.running-op-bar {
+			flex: 1; height: 8px;
+			background: var(--theme-color-background-tertiary, #e9ecef);
+			border-radius: 4px; overflow: hidden; min-width: 120px;
+		}
+		.running-op-bar-fill {
+			height: 100%;
+			background: var(--theme-color-brand-primary, #4a90d9);
+			transition: width 0.5s ease;
+		}
+		.running-op-count { font-size: 0.85em; color: var(--theme-color-text-secondary, #666); white-space: nowrap; }
+		.running-op-pending { color: var(--theme-color-text-muted, #888); font-size: 0.85em; font-style: italic; padding: 4px 0; }
+		.completed-op-row { padding: 8px 0; border-bottom: 1px solid var(--theme-color-background-tertiary, #f0f0f0); }
+		.completed-op-row:last-child { border-bottom: none; }
+		.completed-op-header { display: flex; align-items: center; gap: 10px; font-size: 0.9em; margin-bottom: 4px; }
+		.completed-op-name { font-weight: 600; }
+		.completed-op-stats { color: var(--theme-color-text-secondary, #666); font-size: 0.85em; }
+		.completed-op-checkmark { color: var(--theme-color-status-success, #28a745); }
+		.error-op-row { padding: 6px 0; border-bottom: 1px solid var(--theme-color-background-tertiary, #f0f0f0); font-size: 0.9em; }
+		.error-op-row:last-child { border-bottom: none; }
+		.error-op-header { display: flex; align-items: center; gap: 8px; }
+		.error-op-name { font-weight: 600; color: var(--theme-color-status-error, #dc3545); }
+		.error-op-status { font-size: 0.82em; color: var(--theme-color-status-error, #dc3545); }
+		.error-op-message { font-size: 0.82em; color: var(--theme-color-text-muted, #888); margin-top: 2px; padding-left: 18px; }
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-StatusDetail',
+		Template: /*html*/`
+<div class="rds-status-detail-body">
+	<div class="rds-status-detail-section">
+		<div class="rds-status-detail-section-title">Throughput</div>
+		<div id="ComprehensionLoader-Throughput-Histogram" style="height:120px"></div>
+	</div>
+	<div id="ComprehensionLoader-StatusDetail-Container"></div>
+</div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-StatusDetail',
+		TemplateHash:       'ComprehensionLoader-StatusDetail',
+		DestinationAddress: '#ComprehensionLoader-StatusDetail-Panel'
+	}]
+};

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-TopBar-Nav.js

@@ -0,0 +1,42 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class ComprehensionLoaderTopBarNavView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = ComprehensionLoaderTopBarNavView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-TopBar-Nav',
+	DefaultRenderable:         'ComprehensionLoader-TopBar-Nav',
+	DefaultDestinationAddress: '#Theme-TopBar-Nav',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-nav {
+			display: flex; align-items: center; height: 100%;
+			padding: 0 12px; gap: 8px;
+			color: var(--theme-color-text-on-brand,
+				   var(--theme-color-text-primary, #1a1a1a));
+			font-weight: 500;
+		}
+		.rds-nav-sep { opacity: 0.5; font-weight: 400; margin: 0 2px; }
+		.rds-nav-app { font-weight: 600; opacity: 0.95; }
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-TopBar-Nav',
+		Template: /*html*/`<div class="rds-nav"><span class="rds-nav-sep">·</span><span class="rds-nav-app">Comprehension Loader</span></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-TopBar-Nav',
+		TemplateHash:       'ComprehensionLoader-TopBar-Nav',
+		DestinationAddress: '#Theme-TopBar-Nav'
+	}]
+};

package/source/services/comprehension-loader/pict-app/views/PictView-ComprehensionLoader-TopBar-User.js

@@ -0,0 +1,48 @@
+'use strict';
+
+const libPictView = require('pict-view');
+
+class ComprehensionLoaderTopBarUserView extends libPictView
+{
+	onAfterRender(pRenderable, pAddress, pRecord, pContent)
+	{
+		if (this.pict.CSSMap) { this.pict.CSSMap.injectCSS(); }
+		return super.onAfterRender(pRenderable, pAddress, pRecord, pContent);
+	}
+}
+
+module.exports = ComprehensionLoaderTopBarUserView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier:            'ComprehensionLoader-TopBar-User',
+	DefaultRenderable:         'ComprehensionLoader-TopBar-User',
+	DefaultDestinationAddress: '#Theme-TopBar-User',
+	AutoRender:                false,
+	CSS: /*css*/`
+		.rds-user { display: flex; align-items: center; height: 100%; gap: 8px; padding: 0 12px; }
+		.rds-user-btn {
+			padding: 4px 8px;
+			border: 1px solid var(--theme-color-border-default, #5E5549);
+			background: transparent;
+			color: var(--theme-color-text-on-brand,
+				   var(--theme-color-text-secondary, #1a1a1a));
+			border-radius: 4px;
+			cursor: pointer;
+			display: inline-flex; align-items: center; justify-content: center;
+			font-size: 1em; line-height: 1;
+		}
+		.rds-user-btn:hover {
+			background: var(--theme-color-background-hover, rgba(255,255,255,0.08));
+		}
+	`,
+	Templates: [{
+		Hash: 'ComprehensionLoader-TopBar-User',
+		Template: /*html*/`<div class="rds-user"><button class="rds-user-btn" onclick="_Pict.views['ComprehensionLoader-Shell'].toggleSettingsPanel()" title="Settings" aria-label="Settings">{~I:Settings~}</button></div>`
+	}],
+	Renderables: [{
+		RenderableHash:     'ComprehensionLoader-TopBar-User',
+		TemplateHash:       'ComprehensionLoader-TopBar-User',
+		DestinationAddress: '#Theme-TopBar-User'
+	}]
+};