New UI for observing filters

editions/prerelease/tiddlers/system/DefaultTiddlers.tid

@@ -4,7 +4,6 @@ title: $:/DefaultTiddlers
 
 [[$:/plugins/tiddlywiki/internals]]
 [[$:/AdvancedSearch]]
-[[$:/plugins/tiddlywiki/internals/config]]
 [[$:/plugins/tiddlywiki/internals/filterinspection/docs/inspectoperator]]
 [[$:/plugins/tiddlywiki/internals/filterinspection/docs/InspectFilterMacro]]
 [[$:/plugins/tiddlywiki/internals/filterinspection/docs/inspectfiltermacro/examples]]

editions/tw5.com/tiddlers/system/DefaultTiddlers.tid

@@ -5,7 +5,6 @@ type: text/vnd.tiddlywiki
 
 [[$:/plugins/tiddlywiki/internals]]
 [[$:/AdvancedSearch]]
-[[$:/plugins/tiddlywiki/internals/config]]
 [[$:/plugins/tiddlywiki/internals/filterinspection/docs/inspectoperator]]
 [[$:/plugins/tiddlywiki/internals/filterinspection/docs/InspectFilterMacro]]
 [[$:/plugins/tiddlywiki/internals/filterinspection/docs/inspectfiltermacro/examples]]

plugins/tiddlywiki/internals/config.tid

@@ -1,22 +0,0 @@
-title: $:/plugins/tiddlywiki/internals/config
-tags: $:/tags/ControlPanel
-caption: Internals
-
-Configuration for the Internals Plugin.
-
-!! Logged Filters
-
-Until there is a UI to create them, you can clone an existing inspectable filter record and modify it.
-
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/InspectableFilter]!has[draft.of]sort[]]" variable="inspectableFilter">
-	<div>
-		<$link to=<<inspectableFilter>>><$text text=<<inspectableFilter>>/></$link>: <$text text={{{ [<inspectableFilter>get[text]] }}}/>
-	</div>
-	<ol>
-		<$list filter="[all[shadows+tiddlers]tag[$:/tags/FilterInspectionOutput]!has[draft.of]!sort[modified]] :filter[<inspectableFilter>get[text]match{!!filter}]" variable="inspectionOutput">
-			<li>
-				<$link to=<<inspectionOutput>>><$text text=<<inspectionOutput>>/></$link>
-			</li>
-		</$list>
-	</ol>
-</$list>

plugins/tiddlywiki/internals/filterinspection/InspectResultsTab.tid

@@ -3,8 +3,6 @@ tags: $:/tags/AdvancedSearch/FilterResults
 caption: Inspect
 list-after: $:/core/ui/AdvancedSearch/Filter/FilterResults/Results
 
-\whitespace trim
-
-\procedure lingo-base() $:/language/Search/
+Filter evaluation trace:
 
 <$transclude $variable="inspect-filter" filter={{$:/temp/advancedsearch}} />

plugins/tiddlywiki/internals/filterinspection/ObserveResultsTab.tid

@@ -0,0 +1,37 @@
+title: $:/plugins/tiddlywiki/internals/filterinspection/ObserveResultsTab
+tags: $:/tags/AdvancedSearch/FilterResults
+caption: Observe
+list-after: $:/plugins/tiddlywiki/internals/filterinspection/InspectResultsTab
+
+Log traces of this filter expression in the background. A trace will be generated every time the filter is evaluated, regardless of the context. The trace is only saved if the results are different from previous traces.
+
+<$button>
+<%if [all[shadows+tiddlers]tag[$:/tags/InspectableFilter]get[text]match{$:/temp/advancedsearch}count[]match[0]] %>
+	<$action-createtiddler $basetitle="$:/config/inspectable-filters/filter" tags="$:/tags/InspectableFilter" type="text/plain" text={{$:/temp/advancedsearch}}/>
+<%endif%>
+Enable logging for this filter
+</$button>
+
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/InspectableFilter]!has[draft.of]sort[]]" variable="inspectableFilter">
+	<div class="tc-box tc-inspectable-filter-box">
+		<div class="tc-box-header">
+			<$text text={{{ [<inspectableFilter>get[text]] }}}/> <$link to=<<inspectableFilter>>>{{$:/core/images/open-window}}</$link>
+		</div>
+		<div class="tc-box-content">
+			<ol>
+				<$list filter="[all[shadows+tiddlers]tag[$:/tags/FilterInspectionOutput]!has[draft.of]!sort[modified]] :filter[<inspectableFilter>get[text]match{!!filter}]" variable="inspectionOutput">
+					<li>
+						<div class="tc-box tc-inspectable-filter-trace-box">
+							<div class="tc-box-header">
+								<$text text={{{ [<inspectionOutput>get[modified]format:date[DDth mmm YYYY 0hh:0mm:0ss]] }}}/><$link to=<<inspectionOutput>>>{{$:/core/images/open-window}}</$link>
+							</div>
+							<div class="tc-box-content">
+								<$transclude $variable="inspect-filter-output-unframed" jsonOutput={{{ [<inspectionOutput>get[text]] }}} />
+							</div>
+						</div>
+					</li>
+				</$list>
+			</ol>
+		</div>
+	</div>
+</$list>

plugins/tiddlywiki/internals/filterinspection/inspect-filter.tid

@@ -141,6 +141,20 @@ tags: $:/tags/Macro
 </div>
 \end inspect-run
 
+\procedure inspect-filter-output-unframed(jsonOutput,orientation:"horizontal")
+<$scrollable bind={{{ [<qualify "$:/temp/filter-inspector/">addsuffix<filter>] }}}>
+	<div class={{{ tc-inspect-filter-box tc-inspect-filter-box-unframed [<orientation>match[horizontal]then[tc-inspect-filter-box-horizontal]] +[join[ ]] }}}>
+		<$transclude $variable="inspect-list" jsonList={{{ [<jsonOutput>jsonextract[input]] }}} class="tc-box tc-inspect-input-box"/>
+		<$list filter="[<jsonOutput>jsonindexes[runs]nsort[]]" variable="indexRun">
+			<$let transclusion={{{ [[run-]addsuffix<indexRun>] }}}>
+				<$transclude $variable="inspect-run" jsonRun={{{ [<jsonOutput>jsonextract[runs],<indexRun>] }}}/>
+			</$let>
+		</$list>
+		<$transclude $variable="inspect-list" jsonList={{{ [<jsonOutput>jsonextract[output]] }}} class="tc-box tc-inspect-output-box"/>
+	</div>
+</$scrollable>
+\end inspect-filter-output-unframed
+
 \procedure inspect-filter-output(jsonOutput,orientation:"horizontal")
 <$scrollable bind={{{ [<qualify "$:/temp/filter-inspector/">addsuffix<filter>] }}}>
 	<div class={{{ tc-inspect-filter-box [<orientation>match[horizontal]then[tc-inspect-filter-box-horizontal]] +[join[ ]] }}}>

plugins/tiddlywiki/internals/filterinspection/styles.tid

@@ -27,6 +27,12 @@ tags: $:/tags/Stylesheet
 	align-items: center;
 }
 
+.tc-box-header svg {
+	width: 1em;
+	height: 1em;
+	margin-left: 0.25em;
+}
+
 .tc-box-header button {
 	color: var(--box-background-color);
 	background-color: var(--box-foreground-color);
@@ -117,11 +123,22 @@ tags: $:/tags/Stylesheet
 	--box-foreground-color: <<colour code-foreground>>;
 }
 
+.tc-inspectable-filter-box {
+	--box-background-color: #ffebe1;
+	--box-foreground-color: #ff3f00;
+}
+
+.tc-inspectable-filter-trace-box {
+	--box-background-color: #ffdec1;
+	--box-foreground-color: #ff7a00;
+}
+
 .tc-inspect-filter-box.tc-inspect-filter-box-horizontal {
 	display: flex;
 }
 
 .tc-inspect-filter-box.tc-inspect-filter-box-horizontal > .tc-box > .tc-box-content,
+.tc-inspect-filter-box.tc-inspect-filter-box-horizontal.tc-inspect-filter-box-unframed,
 .tc-inspect-filter-box.tc-inspect-filter-box-horizontal .tc-inspect-run-box > .tc-box-content,
 .tc-inspect-filter-box.tc-inspect-filter-box-horizontal .tc-inspect-operation-box > .tc-box-content,
 .tc-inspect-filter-box.tc-inspect-filter-box-horizontal .tc-inspect-operator-box > .tc-box-content {
@@ -131,6 +148,11 @@ tags: $:/tags/Stylesheet
 	align-items: flex-start;
 }
 
+.tc-inspectable-filter-box > .tc-box-content > ol {
+	list-style: none;
+	padding-left: 0;
+}
+
 .tc-inspect-operations-wrapper {
 	display: flex;
 	flex-direction: column;
@@ -139,26 +161,26 @@ tags: $:/tags/Stylesheet
 }
 
 .tc-inspect-run-box {
-	--box-background-color: #ffc;
-	--box-foreground-color: #440;
+	--box-background-color: #ffffcc;
+	--box-foreground-color: #444400;
 }
 
 .tc-inspect-operation-box {
-	--box-background-color: #cfc;
-	--box-foreground-color: #040;
+	--box-background-color: #ccffcc;
+	--box-foreground-color: #004400;
 }
 
 .tc-inspect-operator-box {
-	--box-background-color: #fcc;
-	--box-foreground-color: #400;
+	--box-background-color: #ffcccc;
+	--box-foreground-color: #440000;
 }
 
 .tc-box.tc-inspect-input-box {
-	--box-background-color: #fcf;
-	--box-foreground-color: #404;
+	--box-background-color: #ffccff;
+	--box-foreground-color: #440044;
 }
 
 .tc-box.tc-inspect-output-box {
-	--box-background-color: #cff;
-	--box-foreground-color: #044;
+	--box-background-color: #4fd3d3;
+	--box-foreground-color: #004444;
 }

plugins/tiddlywiki/internals/plugin.info

@@ -2,6 +2,6 @@
 	"title": "$:/plugins/tiddlywiki/internals",
 	"name": "Internals",
 	"description": "Tools for exploring the internals of TiddlyWiki",
-	"list": "readme docs config",
+	"list": "readme docs",
 	"stability": "STABILITY_2_STABLE"
 }

plugins/tiddlywiki/internals/readme.tid

@@ -1,13 +1,14 @@
 title: $:/plugins/tiddlywiki/internals/readme
 
-This plugin adds several features to help explore the internals of TiddlyWiki, and to debug issues with wikitext and filters.
+This plugin adds several features to help explore the internals of TiddlyWiki, and to debug wikitext and filters.
 
-!! Inspecting Filters
+!! Inspecting Filter Traces
 
-Filter inspection is based on a schematic visualisation that shows all the steps involved in evaluating a filter. These schematics can be generated and accessed in several ways:
+Filter inspection is based on a schematic visualisation that traces all the steps involved in evaluating a filter. These traces can be generated and accessed in several ways:
 
-* A new "Inspect" tab under the Advanced Search filter results that shows the schematic for the current filter
-* The background filter inspection mechanism allows specific filters to be registered to be inspected whenever they are evaluated, regardless of the context. The output of the inspection is only saved if the results are different than previous evaluations
+* Via two new tabs under the Advanced Search filter results:
+** The ''Inspect'' tab shows the schematic trace for the current filter
+** The ''Observe'' tab allows the current filter to be logged in the background. A new trace is generated every time the filter is evaluated, regardless of the context, if the results are different from previous evaluations
 * Directly using the `<<inspect-filter>>` procedure, or the underlying `inspect[]` operator
 
 !! Inspecting Parse Trees and Widget Trees