retold-data-service 2.0.21 → 2.0.23

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

@@ -0,0 +1,269 @@
+const libPictView = require('pict-view');
+
+class ComprehensionLoaderSessionView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	configureSession()
+	{
+		let tmpServerURL = document.getElementById('serverURL').value.trim();
+		if (!tmpServerURL)
+		{
+			this.pict.providers.ComprehensionLoader.setStatus('sessionConfigStatus', 'Server URL is required.', 'error');
+			return;
+		}
+
+		let tmpBody = { ServerURL: tmpServerURL.replace(/\/+$/, '') + '/1.0/' };
+
+		let tmpAuthMethod = document.getElementById('authMethod').value.trim();
+		if (tmpAuthMethod)
+		{
+			tmpBody.AuthenticationMethod = tmpAuthMethod;
+		}
+
+		let tmpAuthURI = document.getElementById('authURI').value.trim();
+		if (tmpAuthURI)
+		{
+			tmpBody.AuthenticationURITemplate = tmpAuthURI;
+		}
+
+		let tmpCheckURI = document.getElementById('checkURI').value.trim();
+		if (tmpCheckURI)
+		{
+			tmpBody.CheckSessionURITemplate = tmpCheckURI;
+		}
+
+		let tmpCookieName = document.getElementById('cookieName').value.trim();
+		if (tmpCookieName)
+		{
+			tmpBody.CookieName = tmpCookieName;
+		}
+
+		let tmpCookieValueAddr = document.getElementById('cookieValueAddr').value.trim();
+		if (tmpCookieValueAddr)
+		{
+			tmpBody.CookieValueAddress = tmpCookieValueAddr;
+		}
+
+		let tmpCookieValueTemplate = document.getElementById('cookieValueTemplate').value.trim();
+		if (tmpCookieValueTemplate)
+		{
+			tmpBody.CookieValueTemplate = tmpCookieValueTemplate;
+		}
+
+		let tmpLoginMarker = document.getElementById('loginMarker').value.trim();
+		if (tmpLoginMarker)
+		{
+			tmpBody.CheckSessionLoginMarker = tmpLoginMarker;
+		}
+
+		this.pict.providers.ComprehensionLoader.setStatus('sessionConfigStatus', 'Configuring session...', 'info');
+
+		this.pict.providers.ComprehensionLoader.api('POST', '/comprehension_load/session/configure', tmpBody)
+			.then(
+				(pData) =>
+				{
+					if (pData.Success)
+					{
+						this.pict.providers.ComprehensionLoader.setStatus('sessionConfigStatus', 'Session configured for ' + pData.ServerURL + ' (domain: ' + pData.DomainMatch + ')', 'ok');
+					}
+					else
+					{
+						this.pict.providers.ComprehensionLoader.setStatus('sessionConfigStatus', 'Configuration failed: ' + (pData.Error || 'Unknown error'), 'error');
+					}
+				})
+			.catch(
+				(pError) =>
+				{
+					this.pict.providers.ComprehensionLoader.setStatus('sessionConfigStatus', 'Request failed: ' + pError.message, 'error');
+				});
+	}
+
+	authenticate()
+	{
+		let tmpUserName = document.getElementById('userName').value.trim();
+		let tmpPassword = document.getElementById('password').value.trim();
+
+		if (!tmpUserName || !tmpPassword)
+		{
+			this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Username and password are required.', 'error');
+			this.pict.providers.ComprehensionLoader.setSectionPhase(1, 'error');
+			return;
+		}
+
+		this.pict.providers.ComprehensionLoader.setSectionPhase(1, 'busy');
+		this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Authenticating...', 'info');
+
+		this.pict.providers.ComprehensionLoader.api('POST', '/comprehension_load/session/authenticate', { UserName: tmpUserName, Password: tmpPassword })
+			.then(
+				(pData) =>
+				{
+					if (pData.Success && pData.Authenticated)
+					{
+						this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Authenticated successfully.', 'ok');
+						this.pict.providers.ComprehensionLoader.setSectionPhase(1, 'ok');
+					}
+					else
+					{
+						this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Authentication failed: ' + (pData.Error || 'Not authenticated'), 'error');
+						this.pict.providers.ComprehensionLoader.setSectionPhase(1, 'error');
+					}
+				})
+			.catch(
+				(pError) =>
+				{
+					this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Request failed: ' + pError.message, 'error');
+					this.pict.providers.ComprehensionLoader.setSectionPhase(1, 'error');
+				});
+	}
+
+	checkSession()
+	{
+		this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Checking session...', 'info');
+
+		this.pict.providers.ComprehensionLoader.api('GET', '/comprehension_load/session/check')
+			.then(
+				(pData) =>
+				{
+					if (pData.Authenticated)
+					{
+						this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Session is active. Server: ' + (pData.ServerURL || 'N/A'), 'ok');
+					}
+					else if (pData.Configured)
+					{
+						this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Session configured but not authenticated.', 'warn');
+					}
+					else
+					{
+						this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'No session configured.', 'warn');
+					}
+				})
+			.catch(
+				(pError) =>
+				{
+					this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Request failed: ' + pError.message, 'error');
+				});
+	}
+
+	deauthenticate()
+	{
+		this.pict.providers.ComprehensionLoader.api('POST', '/comprehension_load/session/deauthenticate')
+			.then(
+				(pData) =>
+				{
+					this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Session deauthenticated.', 'info');
+					this.pict.providers.ComprehensionLoader.setSectionPhase(1, '');
+				})
+			.catch(
+				(pError) =>
+				{
+					this.pict.providers.ComprehensionLoader.setStatus('sessionAuthStatus', 'Request failed: ' + pError.message, 'error');
+				});
+	}
+
+	goAction()
+	{
+		// Two-step: configure session, then authenticate after delay
+		this.pict.providers.ComprehensionLoader.setSectionPhase(1, 'busy');
+		this.configureSession();
+		setTimeout(
+			() =>
+			{
+				this.authenticate();
+			}, 1500);
+	}
+}
+
+module.exports = ComprehensionLoaderSessionView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier: 'ComprehensionLoader-Session',
+	DefaultRenderable: 'ComprehensionLoader-Session',
+	DefaultDestinationAddress: '#ComprehensionLoader-Section-Session',
+	Templates:
+	[
+		{
+			Hash: 'ComprehensionLoader-Session',
+			Template: /*html*/`
+<div class="accordion-row">
+	<div class="accordion-number">1</div>
+	<div class="accordion-card" id="section1" data-section="1">
+		<div class="accordion-header" onclick="pict.views['ComprehensionLoader-Layout'].toggleSection('section1')">
+			<div class="accordion-title">Remote Session</div>
+			<span class="accordion-phase" id="phase1"></span>
+			<div class="accordion-preview" id="preview1">Configure remote server URL and credentials</div>
+			<div class="accordion-actions">
+				<span class="accordion-go" onclick="event.stopPropagation(); pict.views['ComprehensionLoader-Session'].goAction()">go</span>
+				<label class="accordion-auto" onclick="event.stopPropagation()"><input type="checkbox" id="auto1"> <span class="auto-label">auto</span></label>
+			</div>
+			<div class="accordion-toggle">&#9660;</div>
+		</div>
+		<div class="accordion-body">
+			<div class="inline-group">
+				<div style="flex:2">
+					<label for="serverURL">Remote Server URL</label>
+					<input type="text" id="serverURL" placeholder="http://remote-server:8086" value="">
+				</div>
+				<div style="flex:1">
+					<label for="authMethod">Auth Method</label>
+					<input type="text" id="authMethod" placeholder="get" value="get">
+				</div>
+			</div>
+
+			<details style="margin-bottom:10px">
+				<summary style="cursor:pointer; font-size:0.9em; color:#666">Advanced Session Options</summary>
+				<div style="padding:10px 0">
+					<label for="authURI">Authentication URI Template (leave blank for default)</label>
+					<input type="text" id="authURI" placeholder="Authenticate/{~D:Record.UserName~}/{~D:Record.Password~}">
+					<label for="checkURI">Check Session URI Template</label>
+					<input type="text" id="checkURI" placeholder="CheckSession">
+					<label for="cookieName">Cookie Name</label>
+					<input type="text" id="cookieName" placeholder="SessionID" value="SessionID">
+					<label for="cookieValueAddr">Cookie Value Address</label>
+					<input type="text" id="cookieValueAddr" placeholder="SessionID" value="SessionID">
+					<label for="cookieValueTemplate">Cookie Value Template (overrides Address if set)</label>
+					<input type="text" id="cookieValueTemplate" placeholder="{~D:Record.SessionID~}">
+					<label for="loginMarker">Login Marker</label>
+					<input type="text" id="loginMarker" placeholder="LoggedIn" value="LoggedIn">
+				</div>
+			</details>
+
+			<button class="primary" onclick="pict.views['ComprehensionLoader-Session'].configureSession()">Configure Session</button>
+			<div id="sessionConfigStatus"></div>
+
+			<hr style="margin:16px 0; border:none; border-top:1px solid #eee">
+
+			<div class="inline-group">
+				<div>
+					<label for="userName">Username</label>
+					<input type="text" id="userName" placeholder="username">
+				</div>
+				<div>
+					<label for="password">Password</label>
+					<input type="password" id="password" placeholder="password">
+				</div>
+			</div>
+
+			<button class="success" onclick="pict.views['ComprehensionLoader-Session'].authenticate()">Authenticate</button>
+			<button class="secondary" onclick="pict.views['ComprehensionLoader-Session'].checkSession()">Check Session</button>
+			<button class="danger" onclick="pict.views['ComprehensionLoader-Session'].deauthenticate()">Deauthenticate</button>
+			<div id="sessionAuthStatus"></div>
+		</div>
+	</div>
+</div>
+`
+		}
+	],
+	Renderables:
+	[
+		{
+			RenderableHash: 'ComprehensionLoader-Session',
+			TemplateHash: 'ComprehensionLoader-Session',
+			DestinationAddress: '#ComprehensionLoader-Section-Session'
+		}
+	]
+};

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

@@ -0,0 +1,330 @@
+const libPictView = require('pict-view');
+
+class ComprehensionLoaderSourceView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender()
+	{
+		// Restore source mode and toggle UI
+		let tmpSourceMode = localStorage.getItem('comprehensionLoader_comprehensionSourceMode');
+		if (tmpSourceMode === 'file')
+		{
+			let tmpFileRadio = document.getElementById('sourceMode_file');
+			if (tmpFileRadio) tmpFileRadio.checked = true;
+		}
+		this.onSourceModeChange();
+	}
+
+	onSourceModeChange()
+	{
+		let tmpMode = document.querySelector('input[name="comprehensionSourceMode"]:checked');
+		let tmpModeName = tmpMode ? tmpMode.value : 'url';
+
+		let tmpURLSection = document.getElementById('sourceURLSection');
+		let tmpFileSection = document.getElementById('sourceFileSection');
+
+		if (tmpURLSection) tmpURLSection.style.display = tmpModeName === 'url' ? '' : 'none';
+		if (tmpFileSection) tmpFileSection.style.display = tmpModeName === 'file' ? '' : 'none';
+
+		this.pict.providers.ComprehensionLoader.updateAllPreviews();
+	}
+
+	fetchFromURL()
+	{
+		let tmpURL = document.getElementById('comprehensionURL').value.trim();
+		if (!tmpURL)
+		{
+			this.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Comprehension URL is required.', 'error');
+			return;
+		}
+
+		this.pict.providers.ComprehensionLoader.setSectionPhase(3, 'busy');
+		this.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Fetching comprehension...', 'info');
+
+		let tmpSelf = this;
+
+		// Try browser fetch first, fall back to server proxy on CORS failure
+		fetch(tmpURL)
+			.then(function(pResponse)
+			{
+				if (!pResponse.ok) throw new Error('HTTP ' + pResponse.status);
+				return pResponse.json();
+			})
+			.then(function(pData)
+			{
+				tmpSelf.sendComprehensionToServer(pData);
+			})
+			.catch(function(pError)
+			{
+				// CORS or network error — try server-side proxy
+				tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Direct fetch failed (' + pError.message + '), trying server proxy...', 'info');
+				tmpSelf.pict.providers.ComprehensionLoader.api('POST', '/comprehension_load/comprehension/proxy-fetch', { URL: tmpURL })
+					.then(function(pProxyData)
+					{
+						if (pProxyData.Success)
+						{
+							tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus',
+								'Loaded via proxy: ' + pProxyData.EntityCount + ' entities, ' + tmpSelf.pict.providers.ComprehensionLoader.formatNumber(pProxyData.TotalRecords) + ' records.', 'ok');
+							tmpSelf.pict.providers.ComprehensionLoader.setSectionPhase(3, 'ok');
+							tmpSelf.renderComprehensionSummary(pProxyData);
+						}
+						else
+						{
+							tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Proxy fetch failed: ' + (pProxyData.Error || 'Unknown error'), 'error');
+							tmpSelf.pict.providers.ComprehensionLoader.setSectionPhase(3, 'error');
+						}
+					})
+					.catch(function(pProxyError)
+					{
+						tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Proxy request failed: ' + pProxyError.message, 'error');
+						tmpSelf.pict.providers.ComprehensionLoader.setSectionPhase(3, 'error');
+					});
+			});
+	}
+
+	loadFromFiles()
+	{
+		let tmpFileInput = document.getElementById('comprehensionFiles');
+		if (!tmpFileInput || tmpFileInput.files.length === 0)
+		{
+			this.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Please select one or more JSON files.', 'error');
+			return;
+		}
+
+		this.pict.providers.ComprehensionLoader.setSectionPhase(3, 'busy');
+		this.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Reading files...', 'info');
+
+		let tmpSelf = this;
+		let tmpFiles = tmpFileInput.files;
+		let tmpMergedData = {};
+		let tmpFilesRead = 0;
+
+		for (let i = 0; i < tmpFiles.length; i++)
+		{
+			(function(pFile)
+			{
+				let tmpReader = new FileReader();
+				tmpReader.onload = function(pEvent)
+				{
+					try
+					{
+						let tmpParsed = JSON.parse(pEvent.target.result);
+
+						// Merge entity keys from this file into the merged data
+						let tmpKeys = Object.keys(tmpParsed);
+						for (let k = 0; k < tmpKeys.length; k++)
+						{
+							let tmpKey = tmpKeys[k];
+							if (Array.isArray(tmpParsed[tmpKey]))
+							{
+								if (!tmpMergedData[tmpKey])
+								{
+									tmpMergedData[tmpKey] = [];
+								}
+								tmpMergedData[tmpKey] = tmpMergedData[tmpKey].concat(tmpParsed[tmpKey]);
+							}
+							else
+							{
+								tmpMergedData[tmpKey] = tmpParsed[tmpKey];
+							}
+						}
+					}
+					catch (pParseError)
+					{
+						tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Error parsing ' + pFile.name + ': ' + pParseError.message, 'error');
+						tmpSelf.pict.providers.ComprehensionLoader.setSectionPhase(3, 'error');
+						return;
+					}
+
+					tmpFilesRead++;
+					if (tmpFilesRead === tmpFiles.length)
+					{
+						// All files read — send merged comprehension to server
+						tmpSelf.sendComprehensionToServer(tmpMergedData);
+					}
+				};
+				tmpReader.onerror = function()
+				{
+					tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Error reading ' + pFile.name, 'error');
+					tmpSelf.pict.providers.ComprehensionLoader.setSectionPhase(3, 'error');
+				};
+				tmpReader.readAsText(pFile);
+			})(tmpFiles[i]);
+		}
+	}
+
+	sendComprehensionToServer(pData)
+	{
+		let tmpSelf = this;
+		this.pict.providers.ComprehensionLoader.api('POST', '/comprehension_load/comprehension/receive', { Comprehension: pData })
+			.then(function(pResult)
+			{
+				if (pResult.Success)
+				{
+					tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus',
+						'Loaded: ' + pResult.EntityCount + ' entities, ' + tmpSelf.pict.providers.ComprehensionLoader.formatNumber(pResult.TotalRecords) + ' records.', 'ok');
+					tmpSelf.pict.providers.ComprehensionLoader.setSectionPhase(3, 'ok');
+					tmpSelf.renderComprehensionSummary(pResult);
+				}
+				else
+				{
+					tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Failed: ' + (pResult.Error || 'Unknown error'), 'error');
+					tmpSelf.pict.providers.ComprehensionLoader.setSectionPhase(3, 'error');
+				}
+			})
+			.catch(function(pError)
+			{
+				tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Request failed: ' + pError.message, 'error');
+				tmpSelf.pict.providers.ComprehensionLoader.setSectionPhase(3, 'error');
+			});
+	}
+
+	renderComprehensionSummary(pResult)
+	{
+		let tmpContainer = document.getElementById('comprehensionSummary');
+		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 += '<tbody>';
+
+		let tmpEntityList = pResult.EntityList || [];
+		let tmpRecordCounts = pResult.RecordCounts || {};
+		for (let i = 0; i < tmpEntityList.length; i++)
+		{
+			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 += '</tr>';
+		}
+
+		tmpHtml += '</tbody>';
+		tmpHtml += '<tfoot><tr>';
+		tmpHtml += '<td style="padding:6px 12px; font-weight:600">Total</td>';
+		tmpHtml += '<td style="padding:6px 12px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums">' + this.pict.providers.ComprehensionLoader.formatNumber(pResult.TotalRecords) + '</td>';
+		tmpHtml += '</tr></tfoot>';
+		tmpHtml += '</table>';
+
+		tmpContainer.innerHTML = tmpHtml;
+		tmpContainer.style.display = '';
+	}
+
+	clearComprehension()
+	{
+		let tmpSelf = this;
+		this.pict.providers.ComprehensionLoader.api('POST', '/comprehension_load/comprehension/clear')
+			.then(function(pData)
+			{
+				if (pData.Success)
+				{
+					tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Comprehension data cleared.', 'info');
+					tmpSelf.pict.providers.ComprehensionLoader.setSectionPhase(3, '');
+					let tmpContainer = document.getElementById('comprehensionSummary');
+					if (tmpContainer)
+					{
+						tmpContainer.innerHTML = '';
+						tmpContainer.style.display = 'none';
+					}
+				}
+			})
+			.catch(function(pError)
+			{
+				tmpSelf.pict.providers.ComprehensionLoader.setStatus('sourceStatus', 'Request failed: ' + pError.message, 'error');
+			});
+	}
+
+	goAction()
+	{
+		let tmpMode = document.querySelector('input[name="comprehensionSourceMode"]:checked');
+		let tmpModeName = tmpMode ? tmpMode.value : 'url';
+
+		if (tmpModeName === 'url')
+		{
+			this.fetchFromURL();
+		}
+		else
+		{
+			this.loadFromFiles();
+		}
+	}
+}
+
+module.exports = ComprehensionLoaderSourceView;
+
+module.exports.default_configuration =
+{
+	ViewIdentifier: 'ComprehensionLoader-Source',
+	DefaultRenderable: 'ComprehensionLoader-Source',
+	DefaultDestinationAddress: '#ComprehensionLoader-Section-Source',
+	Templates:
+	[
+		{
+			Hash: 'ComprehensionLoader-Source',
+			Template: /*html*/`
+<div class="accordion-row">
+	<div class="accordion-number">3</div>
+	<div class="accordion-card" id="section3" data-section="3">
+		<div class="accordion-header" onclick="pict.views['ComprehensionLoader-Layout'].toggleSection('section3')">
+			<div class="accordion-title">Comprehension Source</div>
+			<span class="accordion-phase" id="phase3"></span>
+			<div class="accordion-preview" id="preview3">Provide a comprehension JSON URL or upload files</div>
+			<div class="accordion-actions">
+				<span class="accordion-go" onclick="event.stopPropagation(); pict.views['ComprehensionLoader-Source'].goAction()">go</span>
+				<label class="accordion-auto" onclick="event.stopPropagation()"><input type="checkbox" id="auto3"> <span class="auto-label">auto</span></label>
+			</div>
+			<div class="accordion-toggle">&#9660;</div>
+		</div>
+		<div class="accordion-body">
+			<div style="margin-bottom:12px">
+				<label style="margin-bottom:6px">Source Mode</label>
+				<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>
+					</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>
+					</label>
+				</div>
+			</div>
+
+			<div id="sourceURLSection">
+				<label for="comprehensionURL">Comprehension JSON URL</label>
+				<input type="text" id="comprehensionURL" placeholder="http://example.com/comprehension.json">
+				<button class="primary" onclick="pict.views['ComprehensionLoader-Source'].fetchFromURL()">Fetch Comprehension</button>
+			</div>
+
+			<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>
+				<button class="primary" onclick="pict.views['ComprehensionLoader-Source'].loadFromFiles()">Load Files</button>
+			</div>
+
+			<button class="secondary" onclick="pict.views['ComprehensionLoader-Source'].clearComprehension()" style="margin-left:0">Clear Comprehension</button>
+			<div id="sourceStatus"></div>
+
+			<div id="comprehensionSummary" style="display:none"></div>
+		</div>
+	</div>
+</div>
+`
+		}
+	],
+	Renderables:
+	[
+		{
+			RenderableHash: 'ComprehensionLoader-Source',
+			TemplateHash: 'ComprehensionLoader-Source',
+			DestinationAddress: '#ComprehensionLoader-Section-Source'
+		}
+	]
+};