Devtools
Visualize and debug filter expressions with Mermaid diagrams
Devtools
The @jlnstack/filter/devtools entry point provides utilities for visualizing filter expressions as Mermaid flowcharts.
generateMermaid
Generate Mermaid diagram code from a filter:
import { generateMermaid } from "@jlnstack/filter/devtools"
import { useFilterHook } from "@jlnstack/filter/react"
const filter = useFilterHook(schema)
const mermaid = generateMermaid(filter.getFilter())
console.log(mermaid)
// flowchart TD
// f_0[["AND (root)"]]
// f_1("name: {'operator':'contains','value':'john'}")
// f_0 --> f_1
// f_2("active: true")
// f_0 --> f_2getMermaidLiveUrl
Get a URL to view the diagram on mermaid.live:
import { getMermaidLiveUrl } from "@jlnstack/filter/devtools"
import { useFilterHook } from "@jlnstack/filter/react"
const filter = useFilterHook(schema)
const url = getMermaidLiveUrl(filter.getFilter())
console.log(url)
// https://mermaid.live/edit#base64:...Example Usage
Add a debug button to open the filter visualization:
import { getMermaidLiveUrl } from "@jlnstack/filter/devtools"
import { useFilterHook } from "@jlnstack/filter/react"
function DebugFilter() {
const filter = useFilterHook(schema)
const openVisualization = () => {
const url = getMermaidLiveUrl(filter.getFilter())
window.open(url, "_blank")
}
return (
<button onClick={openVisualization}>
Visualize Filter
</button>
)
}Output Example
For a filter like:
and(
condition("name", { operator: "contains", value: "john" }),
or(
condition("active", true),
condition("verified", true)
)
)The generated Mermaid diagram looks like:
flowchart TD
f_0[["AND (root)"]]
f_1("name: {'operator':'contains','value':'john'}")
f_0 --> f_1
f_2[["OR"]]
f_0 --> f_2
f_3("active: true")
f_2 --> f_3
f_4("verified: true")
f_2 --> f_4