pict-section-recordset 1.0.63 → 1.0.66

package/example_applications/bookstore/views/PictView-Bookstore-Navigation.js

@@ -0,0 +1,228 @@
+const libPictView = require('pict-view');
+
+const _ViewConfiguration =
+{
+	ViewIdentifier: "Bookstore-Navigation",
+
+	DefaultRenderable: "Bookstore-Navigation-Content",
+	DefaultDestinationAddress: "#Bookstore-Navigation-Container",
+
+	AutoRender: false,
+
+	CSS: /*css*/`
+		#Bookstore-Navigation-Container .pure-menu-heading
+		{
+			font-size: 110%;
+			color: #fff;
+			margin: 0;
+			background: #E76F51;
+			padding: 0.75em 0.6em;
+		}
+		.bookstore-nav-session
+		{
+			padding: 0.6em;
+			border-top: 1px solid #333;
+			font-size: 0.8rem;
+			color: #999;
+		}
+		.bookstore-nav-session .dot
+		{
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			border-radius: 50%;
+			background: #2A9D8F;
+			box-shadow: 0 0 4px rgba(42,157,143,0.5);
+			margin-right: 0.35em;
+		}
+		.bookstore-nav-session-name
+		{
+			display: block;
+			color: #D4A373;
+			font-weight: 600;
+			margin-top: 0.25em;
+		}
+		.bookstore-nav-logout
+		{
+			display: block;
+			margin-top: 0.5em;
+			background: #E76F51;
+			color: #fff;
+			border: none;
+			padding: 0.35em 0.75em;
+			border-radius: 4px;
+			font-size: 0.75rem;
+			font-weight: 600;
+			cursor: pointer;
+			width: 100%;
+			text-align: center;
+		}
+		.bookstore-nav-logout:hover
+		{
+			background: #C45A3E;
+		}
+		/* Preprocessor toggle section */
+		.bookstore-nav-preprocessor
+		{
+			padding: 0.6em;
+			border-top: 1px solid #333;
+			font-size: 0.75rem;
+			color: #999;
+		}
+		.bookstore-nav-preprocessor-label
+		{
+			display: block;
+			margin-bottom: 0.35em;
+			font-weight: 600;
+			color: #D4A373;
+			font-size: 0.7rem;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+		}
+		.bookstore-preprocessor-toggle
+		{
+			position: relative;
+			display: inline-block;
+			width: 36px;
+			height: 20px;
+			vertical-align: middle;
+		}
+		.bookstore-preprocessor-toggle input
+		{
+			opacity: 0;
+			width: 0;
+			height: 0;
+		}
+		.bookstore-preprocessor-slider
+		{
+			position: absolute;
+			cursor: pointer;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background-color: #555;
+			transition: background-color 0.2s;
+			border-radius: 20px;
+		}
+		.bookstore-preprocessor-slider:before
+		{
+			position: absolute;
+			content: "";
+			height: 14px;
+			width: 14px;
+			left: 3px;
+			bottom: 3px;
+			background-color: #fff;
+			transition: transform 0.2s;
+			border-radius: 50%;
+		}
+		.bookstore-preprocessor-toggle input:checked + .bookstore-preprocessor-slider
+		{
+			background-color: #2A9D8F;
+		}
+		.bookstore-preprocessor-toggle input:checked + .bookstore-preprocessor-slider:before
+		{
+			transform: translateX(16px);
+		}
+		.bookstore-preprocessor-status
+		{
+			display: inline-block;
+			margin-left: 0.35em;
+			vertical-align: middle;
+			font-size: 0.7rem;
+			color: #999;
+		}
+	`,
+
+	Templates:
+	[
+		{
+			Hash: "Bookstore-Navigation-Template",
+			Template: /*html*/`
+<span class="pure-menu-heading">Bookstore</span>
+<ul class="pure-menu-list">
+	<li class="pure-menu-item"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/Dashboard')" class="pure-menu-link">Dashboard</a></li>
+	<li class="pure-menu-item menu-item-divided"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/Books')" class="pure-menu-link">Books</a></li>
+	<li class="pure-menu-item"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/Authors')" class="pure-menu-link">Authors</a></li>
+	<li class="pure-menu-item"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/BookStores')" class="pure-menu-link">Stores</a></li>
+	<li class="pure-menu-item menu-item-divided"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/About')" class="pure-menu-link">About</a></li>
+	<li class="pure-menu-item"><a href="#" onclick="{~P~}.PictApplication.navigateTo('/Legal')" class="pure-menu-link">Legal</a></li>
+</ul>
+<div class="bookstore-nav-preprocessor">
+	<span class="bookstore-nav-preprocessor-label">Template Preprocessor</span>
+	<label class="bookstore-preprocessor-toggle">
+		<input type="checkbox" id="Bookstore-Preprocessor-Toggle" onclick="{~P~}.PictApplication.togglePreprocessor()">
+		<span class="bookstore-preprocessor-slider"></span>
+	</label>
+	<span class="bookstore-preprocessor-status" id="Bookstore-Preprocessor-Status">Off</span>
+</div>
+<div class="bookstore-nav-session">
+	<span class="dot"></span> Signed in
+	<span class="bookstore-nav-session-name" id="Bookstore-Nav-UserName"></span>
+	<button class="bookstore-nav-logout" type="button" onclick="{~P~}.PictApplication.doLogout()">Log out</button>
+</div>
+`
+		}
+	],
+
+	Renderables:
+	[
+		{
+			RenderableHash: "Bookstore-Navigation-Content",
+			TemplateHash: "Bookstore-Navigation-Template",
+			DestinationAddress: "#Bookstore-Navigation-Container"
+		}
+	]
+};
+
+class BookstoreNavigationView extends libPictView
+{
+	constructor(pFable, pOptions, pServiceHash)
+	{
+		super(pFable, pOptions, pServiceHash);
+	}
+
+	onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent)
+	{
+		// Populate the user name from session data
+		let tmpSession = this.pict.AppData.Session;
+		let tmpDisplayName = '';
+
+		if (tmpSession && tmpSession.UserRecord)
+		{
+			tmpDisplayName = tmpSession.UserRecord.FullName
+				|| tmpSession.UserRecord.LoginID
+				|| '';
+		}
+
+		let tmpUserNameElements = this.services.ContentAssignment.getElement('#Bookstore-Nav-UserName');
+		if (tmpUserNameElements && tmpUserNameElements.length > 0)
+		{
+			tmpUserNameElements[0].textContent = tmpDisplayName;
+		}
+
+		// Sync the preprocessor toggle state with the application's current state
+		let tmpApp = this.pict.PictApplication;
+		let tmpEnabled = tmpApp && tmpApp.isPreprocessorEnabled && tmpApp.isPreprocessorEnabled();
+
+		let tmpToggleElements = this.services.ContentAssignment.getElement('#Bookstore-Preprocessor-Toggle');
+		if (tmpToggleElements && tmpToggleElements.length > 0)
+		{
+			tmpToggleElements[0].checked = !!tmpEnabled;
+		}
+
+		let tmpStatusElements = this.services.ContentAssignment.getElement('#Bookstore-Preprocessor-Status');
+		if (tmpStatusElements && tmpStatusElements.length > 0)
+		{
+			tmpStatusElements[0].textContent = tmpEnabled ? 'On' : 'Off';
+			tmpStatusElements[0].style.color = tmpEnabled ? '#2A9D8F' : '#999';
+		}
+
+		return super.onAfterRender(pRenderable, pRenderDestinationAddress, pRecord, pContent);
+	}
+}
+
+module.exports = BookstoreNavigationView;
+
+module.exports.default_configuration = _ViewConfiguration;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pict-section-recordset",
-  "version": "1.0.63",
+  "version": "1.0.66",
   "description": "Pict dynamic record set management views",
   "main": "source/Pict-Section-RecordSet.js",
   "directories": {
@@ -16,10 +16,10 @@
   "homepage": "https://github.com/stevenvelozo/pict-section-recordset#readme",
   "scripts": {
     "start": "node source/Pict-Section-RecordSet.js",
-    "tests": "npx mocha -u tdd --exit -R spec --grep",
-    "coverage": "npx nyc --reporter=lcov --reporter=text-lcov npx mocha -- -u tdd -R spec",
+    "tests": "npx quack test -g",
+    "coverage": "npx quack coverage",
     "build": "npx quack build",
-    "test": "npx mocha -u tdd -R spec",
+    "test": "npx quack test",
     "lint": "eslint source",
     "types": "tsc -p tsconfig.build.json"
   },
@@ -33,19 +33,19 @@
     "browser-env": "^3.3.0",
     "eslint": "^9.28.0",
     "jquery": "^3.7.1",
-    "pict": "^1.0.350",
-    "pict-application": "^1.0.32",
-    "pict-service-commandlineutility": "^1.0.18",
-    "quackage": "^1.0.51",
+    "pict": "^1.0.363",
+    "pict-application": "^1.0.33",
+    "pict-service-commandlineutility": "^1.0.19",
+    "quackage": "^1.0.65",
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "fable-serviceproviderbase": "^3.0.18",
-    "pict-provider": "^1.0.10",
-    "pict-router": "^1.0.4",
-    "pict-section-form": "^1.0.189",
-    "pict-template": "^1.0.14",
-    "pict-view": "^1.0.66",
+    "fable-serviceproviderbase": "^3.0.19",
+    "pict-provider": "^1.0.12",
+    "pict-router": "^1.0.9",
+    "pict-section-form": "^1.0.196",
+    "pict-template": "^1.0.15",
+    "pict-view": "^1.0.68",
     "sinon": "^21.0.1"
   },
   "mocha": {

package/source/templates/Pict-Template-FilterInstanceViews.js

@@ -5,6 +5,48 @@ const libFilterViews = require('../views/filters/index.js');
  * Specialized instruction for rendering the filter view and plumbing in required context.
  *
  * Based on the Pict base {~V:...~} template instruction.
+ *
+ * ## Async render architecture (see renderAsync below)
+ *
+ * The async path is tuned to get the dashboard records list painted before any
+ * speculative filter-list REST lookups complete. Three things collaborate to
+ * make that happen:
+ *
+ * 1. **Parallel filter fan-out.** Every filter clause starts its own
+ *    `renderWithScopeAsync` in a single pass, instead of chaining through a
+ *    sequential `Anticipate` queue. Template parsing, `onBefore*`/`onProject*`
+ *    microtask hops, and the synchronous DOM walks done inside each filter's
+ *    `onAfterRender` all happen concurrently rather than serialized across N
+ *    filters. Results are collected into an indexed array so final output
+ *    order still matches the clause order.
+ *
+ * 2. **Per-filter transaction isolation.** Each filter render gets its own
+ *    synthetic `RootRenderable` carrying a fresh `TransactionHash`. Any
+ *    `virtual-assignment` sub-renders that the filter's dynamic form spawns
+ *    (notably `PSRSFilterProxyView`, which pict-section-form uses to host
+ *    each filter's input) push into THIS transaction's queue, not the
+ *    dashboard's. The dashboard's outer `renderAsync` callback fires as soon
+ *    as every filter has its template string - without waiting on any of
+ *    the nested input-initialize work.
+ *
+ * 3. **Deferred post-render drain.** The filter's post-render pipeline
+ *    (`onAfterRenderAsync`, which is what runs pict-section-form's
+ *    `runInputProviderFunctions('onInputInitialize', ...)` and therefore
+ *    triggers `EntityBundleRequest.gatherDataFromServer` for any
+ *    speculative-load inputs) is intentionally NOT run inline. It is queued
+ *    via `setTimeout(..., 0)` so it fires on the next macrotask, giving the
+ *    browser a tick to paint the dashboard first.
+ *
+ * ### Render-epoch race guard
+ *
+ * Between the dashboard callback firing and the setTimeout actually running,
+ * the user may have navigated away / applied a different filter experience /
+ * cleared filters. The `PRSP-Filters` view owns a monotonic `_renderEpoch`
+ * counter that gets bumped on every mutating action (`performSearch`,
+ * `handleClear`, `handleReset`, `addFilter`, `removeFilter`). Each scheduled
+ * drain captures the epoch at schedule time and bails out if a newer render
+ * has invalidated it, so a stale REST response can never clobber a filter
+ * container that now belongs to a different experience.
  */
 class PictTemplateFilterInstanceViewInstruction extends libPictTemplate
 {
@@ -177,10 +219,61 @@ class PictTemplateFilterInstanceViewInstruction extends libPictTemplate
 		{
 			pRecord.ViewContext = pRecord.DashboardHash ? `${tmpViewContext}-${pRecord.DashboardHash}` : tmpViewContext;
 		}
-		const tmpAnticipate = this.pict.newAnticipate();
-		let tmpResult = '';
 
 		const tmpClauses = this.pict.Bundle._ActiveFilterState?.[pRecord.RecordSet]?.FilterClauses || [];
+		if (tmpClauses.length === 0)
+		{
+			return fCallback(null, '');
+		}
+
+		// Snapshot the current render epoch so the deferred drain below can
+		// detect a filter re-render that happened between schedule time and
+		// now (see class doc-comment, "Render-epoch race guard").
+		const tmpFiltersView = this.pict.views['PRSP-Filters'];
+		const tmpRenderEpoch = tmpFiltersView ? tmpFiltersView._renderEpoch : 0;
+
+		const tmpResults = new Array(tmpClauses.length).fill('');
+		const tmpDeferredDrains = [];
+		let tmpRemaining = tmpClauses.length;
+		let tmpCallbackFired = false;
+
+		const tmpFinalize = () =>
+		{
+			if (tmpCallbackFired || tmpRemaining > 0)
+			{
+				return;
+			}
+			tmpCallbackFired = true;
+			// Fire the dashboard callback first so the paint lands on the
+			// current tick, then defer the filters' onAfterRender work (which
+			// runs pict-section-form's input-initialize pass and fires any
+			// EntityBundleRequest REST calls) to the next macrotask.
+			fCallback(null, tmpResults.join(''));
+			if (tmpDeferredDrains.length === 0)
+			{
+				return;
+			}
+			setTimeout(() =>
+			{
+				// Epoch guard: bail out if a newer render has invalidated us.
+				if (tmpFiltersView && tmpFiltersView._renderEpoch !== tmpRenderEpoch)
+				{
+					return;
+				}
+				for (let d = 0; d < tmpDeferredDrains.length; d++)
+				{
+					try
+					{
+						tmpDeferredDrains[d]();
+					}
+					catch (pError)
+					{
+						this.log.warn(`Pict: Filter Instance Views Template Render: Error draining deferred filter transaction`, pError);
+					}
+				}
+			}, 0);
+		};
+
 		//FIXME: lookup by hash instead?
 		for (let i = 0; i < tmpClauses.length; i++)
 		{
@@ -189,39 +282,63 @@ class PictTemplateFilterInstanceViewInstruction extends libPictTemplate
 			const tmpView = this._getViewForFilterClause(tmpClause);
 			if (!tmpView)
 			{
+				tmpRemaining--;
 				continue;
 			}
 
 			const tmpRenderGUID = this.pict.getUUID();
-			tmpAnticipate.anticipate((fNext) =>
+			const tmpRecord = Object.assign({}, pRecord, tmpClause);
+			tmpRecord.ClauseAddress = `_ActiveFilterState[${pRecord.RecordSet}].FilterClauses[${i}]`;
+			tmpView.prepareRecord(tmpRecord);
+
+			// Synthetic per-filter root renderable: nested virtual-assignment
+			// renders from this filter's subtree push into the filter's own
+			// transaction queue instead of the dashboard's.
+			const tmpFilterTransactionHash = `FilterInstance-${tmpView.Hash}-${tmpRenderGUID}`;
+			this.pict.TransactionTracking.registerTransaction(tmpFilterTransactionHash);
+			const tmpFilterRootRenderable =
+			{
+				RenderableHash: '__Virtual',
+				TemplateHash: null,
+				ContentDestinationAddress: null,
+				RenderMethod: 'virtual-assignment',
+				TransactionHash: tmpFilterTransactionHash,
+				RootRenderableViewHash: tmpView.Hash,
+			};
+
+			tmpDeferredDrains.push(() =>
 			{
-				const tmpRecord = Object.assign({}, pRecord, tmpClause);
-				tmpRecord.ClauseAddress = `_ActiveFilterState[${pRecord.RecordSet}].FilterClauses[${i}]`;
-				tmpView.prepareRecord(tmpRecord);
+				tmpView.onAfterRenderAsync(() =>
+				{
+					// Remove the per-filter transaction we registered above
+					// once its drain completes. Pict-View will also attempt
+					// to unregister during its own onAfterRenderAsync chain;
+					// whichever call hits first wins, the other is a no-op.
+					this.pict.TransactionTracking.unregisterTransaction(tmpFilterTransactionHash);
+				}, tmpFilterRootRenderable);
+			});
 
-				return tmpView.renderWithScopeAsync(tmpClause, '__Virtual', `__TemplateOutputCache.${tmpRenderGUID}`, tmpRecord, pState && pState.RootRenderable,
-					(pError, pResult) =>
+			tmpView.renderWithScopeAsync(tmpClause, '__Virtual', `__TemplateOutputCache.${tmpRenderGUID}`, tmpRecord, tmpFilterRootRenderable,
+				(pError) =>
+				{
+					if (pError)
 					{
-						if (pError)
-						{
-							this.log.warn(`Pict: Filter Instance Views Template Render: Error rendering view [${tmpView.Hash}]`, pError);
-							//TODO: should we fail the whole render?
-							return fNext();
-							//return fNext(pError);
-						}
-
-						tmpResult += this.pict.__TemplateOutputCache[tmpRenderGUID];
+						this.log.warn(`Pict: Filter Instance Views Template Render: Error rendering view [${tmpView.Hash}]`, pError);
+						//TODO: should we fail the whole render?
+						tmpResults[i] = '';
+					}
+					else
+					{
+						tmpResults[i] = this.pict.__TemplateOutputCache[tmpRenderGUID] || '';
 						// TODO: Uncomment this when we like how it's working
 						//delete this.pict.__TemplateOutputCache[tmpRenderGUID];
-
-						return fNext(null);
-					});
-			});
+					}
+					tmpRemaining--;
+					tmpFinalize();
+				});
 		}
-		return tmpAnticipate.wait((pError) =>
-		{
-			return fCallback(pError, tmpResult);
-		});
+		// Handle the case where every filter was skipped synchronously (no valid view).
+		tmpFinalize();
 	}
 }
 

package/source/views/RecordSet-Filters.js

@@ -236,6 +236,26 @@ class ViewRecordSetSUBSETFilters extends libPictView
 		this.newFilterSearchApplied = false;
 		this.addFilterCallback = null;
 		this.removeFilterCallback = null;
+		// Render-epoch counter, bumped any time the filter list is re-rendered
+		// or a new filter experience is applied. Deferred filter post-render
+		// work (e.g. the setTimeout-scheduled transaction drain in
+		// Pict-Template-FilterInstanceViews) captures the epoch at schedule
+		// time and compares against the current value before running, so a
+		// stale callback doesn't clobber DOM that now belongs to a different
+		// filter experience.
+		this._renderEpoch = 0;
+	}
+
+	/**
+	 * Bump the render epoch. Call this whenever the active filter clauses are
+	 * about to change in a way that would invalidate in-flight filter renders.
+	 *
+	 * @return {number} The new epoch value.
+	 */
+	bumpRenderEpoch()
+	{
+		this._renderEpoch++;
+		return this._renderEpoch;
 	}
 
 	/**
@@ -350,6 +370,7 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	 */
 	performSearch(pRecordSet, pViewContext, pFilterString)
 	{
+		this.bumpRenderEpoch();
 		const tmpPictRouter = this.pict.providers.PictRouter;
 		const tmpProviderConfiguration = this.pict.PictSectionRecordSet.recordSetProviderConfigurations[pRecordSet];
 		let filterExpr = '';
@@ -410,6 +431,7 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	handleClear(pEvent, pRecordSet, pViewContext)
 	{
 		if (pEvent) pEvent.preventDefault();
+		this.bumpRenderEpoch();
 		this.pict.ContentAssignment.assignContent('input[name="filter"]', '');
 		this.pict.Bundle._ActiveFilterState[pRecordSet].FilterClauses = [];
 		this.pict.providers.FilterDataProvider.removeDefaultFilterExperience(pRecordSet, pViewContext);
@@ -426,6 +448,7 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	handleReset(pEvent, pRecordSet, pViewContext)
 	{
 		if (pEvent) pEvent.preventDefault();
+		this.bumpRenderEpoch();
 		this.pict.providers.FilterDataProvider.removeLastUsedFilterExperience(pRecordSet, pViewContext);
 		this.pict.log.info(`Clearing filters for record set: ${pRecordSet} in view context: ${pViewContext}`);
 		// Apply default filter experience if it exists, otherwise just clear
@@ -479,6 +502,7 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	addFilter(pEvent, pRecordSet, pViewContext, pFilterKey, pClauseKey)
 	{
 		if (pEvent) pEvent.preventDefault();
+		this.bumpRenderEpoch();
 		this.pict.log.info(`Adding filter: ${pFilterKey} with clause: ${pClauseKey} to record set: ${pRecordSet} in view context: ${pViewContext}`);
 		this.pict.providers[`RSP-Provider-${pRecordSet}`].addFilterClause(pFilterKey, pClauseKey);
 		//FIXME: we need the record from the original render here but no longer have it...
@@ -495,6 +519,7 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	removeFilter(pEvent, pRecordSet, pViewContext, pSpecificFilterKey)
 	{
 		if (pEvent) pEvent.preventDefault();
+		this.bumpRenderEpoch();
 		this.pict.log.info(`Removing filter: ${pSpecificFilterKey} from record set: ${pRecordSet} in view context: ${pViewContext}`);
 		this.pict.providers[`RSP-Provider-${pRecordSet}`].removeFilterClause(pSpecificFilterKey);
 		//FIXME: we need the record from the original render here but no longer have it...