From 0b03e79339848e57284f05579e8acb6d42f01f72 Mon Sep 17 00:00:00 2001 From: Jeremy Ruston Date: Fri, 25 Apr 2025 17:40:25 +0100 Subject: [PATCH] New UI for observing filters --- .../tiddlers/system/DefaultTiddlers.tid | 1 - .../tiddlers/system/DefaultTiddlers.tid | 1 - plugins/tiddlywiki/internals/config.tid | 22 ---------- .../filterinspection/InspectResultsTab.tid | 4 +- .../filterinspection/ObserveResultsTab.tid | 37 ++++++++++++++++ .../filterinspection/inspect-filter.tid | 14 +++++++ .../internals/filterinspection/styles.tid | 42 ++++++++++++++----- plugins/tiddlywiki/internals/plugin.info | 2 +- plugins/tiddlywiki/internals/readme.tid | 11 ++--- 9 files changed, 91 insertions(+), 43 deletions(-) delete mode 100644 plugins/tiddlywiki/internals/config.tid create mode 100644 plugins/tiddlywiki/internals/filterinspection/ObserveResultsTab.tid diff --git a/editions/prerelease/tiddlers/system/DefaultTiddlers.tid b/editions/prerelease/tiddlers/system/DefaultTiddlers.tid index 39259e926..fd4dc473a 100644 --- a/editions/prerelease/tiddlers/system/DefaultTiddlers.tid +++ b/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]] diff --git a/editions/tw5.com/tiddlers/system/DefaultTiddlers.tid b/editions/tw5.com/tiddlers/system/DefaultTiddlers.tid index 04f75906a..8942c8796 100644 --- a/editions/tw5.com/tiddlers/system/DefaultTiddlers.tid +++ b/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]] diff --git a/plugins/tiddlywiki/internals/config.tid b/plugins/tiddlywiki/internals/config.tid deleted file mode 100644 index fdc73bc86..000000000 --- a/plugins/tiddlywiki/internals/config.tid +++ /dev/null @@ -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"> -
- <$link to=<>><$text text=<>/>: <$text text={{{ [get[text]] }}}/> -
-
    - <$list filter="[all[shadows+tiddlers]tag[$:/tags/FilterInspectionOutput]!has[draft.of]!sort[modified]] :filter[get[text]match{!!filter}]" variable="inspectionOutput"> -
  1. - <$link to=<>><$text text=<>/> -
    2. - -
- diff --git a/plugins/tiddlywiki/internals/filterinspection/InspectResultsTab.tid b/plugins/tiddlywiki/internals/filterinspection/InspectResultsTab.tid index 8de210314..e6a08b4b2 100644 --- a/plugins/tiddlywiki/internals/filterinspection/InspectResultsTab.tid +++ b/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}} /> diff --git a/plugins/tiddlywiki/internals/filterinspection/ObserveResultsTab.tid b/plugins/tiddlywiki/internals/filterinspection/ObserveResultsTab.tid new file mode 100644 index 000000000..98b748b7e --- /dev/null +++ b/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 + + +<$list filter="[all[shadows+tiddlers]tag[$:/tags/InspectableFilter]!has[draft.of]sort[]]" variable="inspectableFilter"> +
+
+ <$text text={{{ [get[text]] }}}/> <$link to=<>>{{$:/core/images/open-window}} +
+
+
    + <$list filter="[all[shadows+tiddlers]tag[$:/tags/FilterInspectionOutput]!has[draft.of]!sort[modified]] :filter[get[text]match{!!filter}]" variable="inspectionOutput"> +
  1. +
    +
    + <$text text={{{ [get[modified]format:date[DDth mmm YYYY 0hh:0mm:0ss]] }}}/><$link to=<>>{{$:/core/images/open-window}} +
    +
    + <$transclude $variable="inspect-filter-output-unframed" jsonOutput={{{ [get[text]] }}} /> +
    +
    +
    2. + +
+
+
+ diff --git a/plugins/tiddlywiki/internals/filterinspection/inspect-filter.tid b/plugins/tiddlywiki/internals/filterinspection/inspect-filter.tid index 672cb0449..e0e4e3599 100644 --- a/plugins/tiddlywiki/internals/filterinspection/inspect-filter.tid +++ b/plugins/tiddlywiki/internals/filterinspection/inspect-filter.tid @@ -141,6 +141,20 @@ tags: $:/tags/Macro \end inspect-run +\procedure inspect-filter-output-unframed(jsonOutput,orientation:"horizontal") +<$scrollable bind={{{ [addsuffix] }}}> +
match[horizontal]then[tc-inspect-filter-box-horizontal]] +[join[ ]] }}}> + <$transclude $variable="inspect-list" jsonList={{{ [jsonextract[input]] }}} class="tc-box tc-inspect-input-box"/> + <$list filter="[jsonindexes[runs]nsort[]]" variable="indexRun"> + <$let transclusion={{{ [[run-]addsuffix] }}}> + <$transclude $variable="inspect-run" jsonRun={{{ [jsonextract[runs],] }}}/> + + + <$transclude $variable="inspect-list" jsonList={{{ [jsonextract[output]] }}} class="tc-box tc-inspect-output-box"/> +
+ +\end inspect-filter-output-unframed + \procedure inspect-filter-output(jsonOutput,orientation:"horizontal") <$scrollable bind={{{ [addsuffix] }}}>
match[horizontal]then[tc-inspect-filter-box-horizontal]] +[join[ ]] }}}> diff --git a/plugins/tiddlywiki/internals/filterinspection/styles.tid b/plugins/tiddlywiki/internals/filterinspection/styles.tid index 2b9ff543b..23ac6ded4 100644 --- a/plugins/tiddlywiki/internals/filterinspection/styles.tid +++ b/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: <>; } +.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; } diff --git a/plugins/tiddlywiki/internals/plugin.info b/plugins/tiddlywiki/internals/plugin.info index ded750fed..d77b6fb3b 100644 --- a/plugins/tiddlywiki/internals/plugin.info +++ b/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" } diff --git a/plugins/tiddlywiki/internals/readme.tid b/plugins/tiddlywiki/internals/readme.tid index 5380d4f40..9072e3069 100644 --- a/plugins/tiddlywiki/internals/readme.tid +++ b/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 `<>` procedure, or the underlying `inspect[]` operator !! Inspecting Parse Trees and Widget Trees