mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-04-08 03:36:38 +00:00
Code Issues Releases Wiki Activity

Introduce filter visualisation

Browse Source
This commit is contained in:
Jeremy Ruston 2025-04-02 22:05:43 +01:00
parent 5226ca1f75
commit 1e10496fd6
4 changed files with 170 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
core/ui/AdvancedSearch/FilterResults/Inspect.tid
View File

@ -2,10 +2,8 @@ title: $:/core/ui/AdvancedSearch/Filter/FilterResults/Inspect
tags: $:/tags/AdvancedSearch/FilterResults
caption: {{$:/language/Search/Filter/FilterResults/Inspect/Caption}}
\whitespace trim
\procedure lingo-base() $:/language/Search/
<$let json={{{ [inspect{$:/temp/advancedsearch}] }}}>
<$transclude $variable="copy-to-clipboard-above-right" src=<<json>>/>
<$codeblock code=<<json>> language="application/json" }}}/>
</$let>
<$transclude $variable="inspect-filter" filter={{$:/temp/advancedsearch}} />

2
core/wiki/config/AdvancedSearchFilterDefaultTab.tid
View File

@ -1,2 +1,2 @@
title: $:/state/tab-1749438307
text: $:/core/ui/AdvancedSearch/Filter/FilterResults/Results
text: $:/core/ui/AdvancedSearch/Filter/FilterResults/Inspect

96
core/wiki/macros/inspect-filter.tid Normal file
View File

@ -0,0 +1,96 @@
title: $:/core/macros/inspect-filter
tags: $:/tags/Macro
\whitespace trim
\procedure inspect-list(jsonList,prompt,class:"tc-box")
<div class=<<class>>>
<div class="tc-box-header">
<$text text=<<prompt>>/>
<span class="tc-pill"><$text text={{{ [<jsonList>jsonindexes[]count[]] }}}/></span>
</div>
<div class="tc-box-content">
<$list filter="[<jsonList>jsonindexes[]limit[10]]" variable="indexList">
<$list-template>
<div class="tc-box-content-list-item">
<$text text={{{ [<jsonList>jsonget<indexList>] }}} />
</div>
</$list-template>
<$list-empty>
<div class="tc-box-content-list-empty">
(No items)
</div>
</$list-empty>
</$list>
</div>
</div>
\end inspect-list
\procedure inspect-operator(jsonOperator)
<div class="tc-box tc-inspect-operator-box">
<div class="tc-box-header">
Operator
<span class="tc-pill">
<$text text={{{ [<jsonOperator>jsonget[prefix]] }}} />
<$text text={{{ [<jsonOperator>jsonget[operatorName]] }}} />
</span>
<%if [<jsonOperator>jsonindexes[suffixes]length[]compare:number:gt[0]] %>
<$list filter="[<jsonOperator>jsonindexes[suffixes]]" variable="indexSuffix">
<span class="tc-pill">
:<$text text={{{ [<jsonOperator>jsonget[suffixes],<indexSuffix>] }}} />
</span>
</$list>
<%endif%>
<$list filter="[<jsonOperator>jsonindexes[operands]]" variable="indexOperand">
<span class="tc-pill">
<$text text={{{ [<jsonOperator>jsonget[operands],<indexOperand>] }}} />
</span>
</$list>
</div>
<div class="tc-box-content">
<$transclude $variable="inspect-list" jsonList={{{ [<jsonOperator>jsonextract[input]] }}} prompt="Operator Input" class="tc-box tc-inspect-input-box"/>
<$transclude $variable="inspect-list" jsonList={{{ [<jsonOperator>jsonextract[output]] }}} prompt="Operator Output" class="tc-box tc-inspect-output-box"/>
</div>
</div>
\end inspect-operator
\procedure inspect-run(jsonRun)
<div class="tc-box tc-inspect-run-box">
<div class="tc-box-header">
Run
<span class="tc-pill">:<$text text={{{ [<jsonRun>jsonget[prefixName]] }}} /></span>
<%if [<jsonRun>jsonindexes[suffixes]length[]compare:number:gt[0]] %>
<$list filter="[<jsonRun>jsonindexes[suffixes]]" variable="indexSuffix">
<span class="tc-pill">
:<$text text={{{ [<jsonRun>jsonget[suffixes],<indexSuffix>] }}} />
</span>
</$list>
<%endif%>
</div>
<div class="tc-box-content">
<$transclude $variable="inspect-list" jsonList={{{ [<jsonRun>jsonextract[input]] }}} prompt="Run Input" class="tc-box tc-inspect-input-box"/>
<$list filter="[<jsonRun>jsonindexes[operators]]" variable="indexOperator">
<$transclude $variable="inspect-operator" jsonOperator={{{ [<jsonRun>jsonextract[operators],<indexOperator>] }}}/>
</$list>
<$transclude $variable="inspect-list" jsonList={{{ [<jsonRun>jsonextract[output]] }}} prompt="Run Output" class="tc-box tc-inspect-output-box">
</div>
</div>
\end inspect-run
\procedure inspect-filter(filter,inputFilter:"[all[tiddler]]")
<$let json={{{ [subfilter<inputFilter>inspect<filter>] }}}>
<div class="tc-box tc-inspect-filter-box">
<div class="tc-box-header">
Filter
<span class="tc-pill"><$text text={{{ [<json>jsonget[inputFilter]] }}}/></span>
</div>
<div class="tc-box-content">
<$transclude $variable="inspect-list" jsonList={{{ [<json>jsonextract[input]] }}} prompt="Filter Input" class="tc-box tc-inspect-input-box"/>
<$list filter="[<json>jsonindexes[runs]]" variable="indexRun">
<$transclude $variable="inspect-run" jsonRun={{{ [<json>jsonextract[runs],<indexRun>] }}}/>
</$list>
<$transclude $variable="inspect-list" jsonList={{{ [<json>jsonextract[output]] }}} prompt="Filter Output" class="tc-box tc-inspect-output-box"/>
</div>
</div>
</$let>
\end inspect-filter

70
themes/tiddlywiki/vanilla/base.tid
View File

@ -3490,6 +3490,76 @@ span.tc-translink > a:first-child {
padding: 0.25em 1em;
}
/*
** Filter Inspection
*/
.tc-box {
border: 1px solid var(--box-foreground-color););
border-radius: 4px;
}
.tc-box .tc-box {
margin: 0.5em;
}
.tc-inspect-filter-box {
--box-background-color: <<colour code-border>>;
--box-foreground-color: <<colour code-foreground>>;
}
.tc-inspect-run-box {
--box-background-color: #ffc;
--box-foreground-color: #440;
}
.tc-inspect-operator-box {
--box-background-color: #fcc;
--box-foreground-color: #400;
}
.tc-inspect-input-box {
--box-background-color: #fcf;
--box-foreground-color: #404;
}
.tc-inspect-output-box {
--box-background-color: #cff;
--box-foreground-color: #044;
}
.tc-box-header {
padding: 0.25em;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: var(--box-background-color);
background-color: var(--box-foreground-color);
}
.tc-box-content {
padding: 0.25em;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
color: var(--box-foreground-color);
background-color: var(--box-background-color);
}
.tc-box-content-list-item {
}
.tc-box-content-list-empty {
}
.tc-pill {
padding: 0.125em 0.25em;
margin: 0 0.25em;
border-radius: 6px;
color: var(--box-foreground-color);
background-color: var(--box-background-color);
}
/*
** Flexbox utility classes
*/