JSONPathPlayground

The full-size counterpart to the inline JSONPath dropdown. The dropdown is a preview and caps its walk to stay instant; this browses the row with no depth limit, every array element, and every property — and pairs the tree with what the expression actually selects, evaluated by the backend that will run it, so an author stops finding out at query time.

Source

Import

import { JSONPathPlayground } from "@flanksource/clicky-ui/components";

Demos

No dedicated Storybook demo is available for this component yet.

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
assignsRoot	boolean	—	True when `onCommit` writes the root itself. It only changes what the dialog says about a path that descends into an encoded column: that the root will be recorded, rather than instructing the author to go and record it. Consumers that drop the root leave this unset and keep the warning.
evaluate	(…) => Promise<JSONPathEvalResult>	—	Evaluates the draft against the selected row. Without it the dialog is a browser only — it shows the selected node's own value instead of a match set, which is all an offline demo can honestly claim.
onClose*	(…) => void	—	—
onCommit*	(…) => void	—	Commits the drafted expression, along with the column it must be rooted at.
open*	boolean	—	—
rows*	unknown[]	—	Sampled rows to browse. A row switcher appears once there is more than one.
source	string	—	The column the field's path is *already* rooted at — its saved `source`. Without it the dialog browses and evaluates from the row while the value it was opened with is written against a decoded column, so a column that works perfectly well reports no matches and an author is invited to fix it.
title	string	JSONPath playground	—
value*	string	—	The expression the field currently holds.