Improving the Add Example Page: User-Friendly Key Editing Ideas

·Jul 09, 2025 10:27 PM

An idea for improving the Add Example page, writing the dict directly is tricky esp. when the value contains newlines, or a json (with many escaped characters). One idea for improving the UI is to enable user to add value for individual keys.

11 comments

· Sorted by Oldest

RunLLM
APP
·
Phoenix currently requires users to input the entire JSON object for fields like input, output, and metadata when adding an example, which can be cumbersome if values contain newlines or complex JSON, as seen in the use of a `JSONEditor` for these fields. There is no built-in UI for editing individual key-value pairs directly; users must edit the full JSON string for each field (<https://github.com/Arize-ai/phoenix/blob/main/app/src/pages/example/EditExampleDialog.tsx|EditExampleDialog.tsx>, <https://github.com/Arize-ai/phoenix/blob/main/app/src/pages/trace/SpanToDatasetExampleDialog.tsx|SpanToDatasetExampleDialog.tsx>). Would you like more detail on how the current JSON editing works or suggestions for possible UI improvements? Sources: - <https://github.com/Arize-ai/phoenix/blob/main/app/src/pages/example/EditExampleDialog.tsx|EditExampleDialog.tsx> - <https://github.com/Arize-ai/phoenix/blob/main/app/src/pages/trace/SpanToDatasetExampleDialog.tsx|SpanToDatasetExampleDialog.tsx>
💡 Hint: Mention RunLLM in the thread for followups.
Xander S.
·
Hey Zhuyi X., it sounds like you have in mind a form field?
Zhuyi X.
·
not exactly sure what you mean by a form field. I'm thinking of something like this for each of input, output, and metadata
Xander S.
·
It sounds like you mainly want a way to enter complex text and values
Zhuyi X.
·
yeah, that's basically it. The alternative is to do it programatically, but it's less convenient for adding ad-hoc examples.
👍1
Xander S.
·
Makes sense. There may be some subtleties to consider since we don't know the type of the value a priori without a schema on the dataset examples. Feel free to file us an enhancement request!
Zhuyi X.
·
I thought only text is allowed for the value, no?
Xander S.
·
You could have any valid JSON type as the value: text, list, object, etc.
Zhuyi X.
·
wait, I thought json has to be serialized to be a value, no? Otherwise, how does rendering work on the UI?
Xander S.
·
I just mean it's probably nicer to have a JSON editor than a plain text editor if the value is JSON.
Zhuyi X.
·
I added https://github.com/Arize-ai/phoenix/issues/8521
👍1

RunLLM
APP
·
Phoenix currently requires users to input the entire JSON object for fields like input, output, and metadata when adding an example, which can be cumbersome if values contain newlines or complex JSON, as seen in the use of a `JSONEditor` for these fields. There is no built-in UI for editing individual key-value pairs directly; users must edit the full JSON string for each field (<https://github.com/Arize-ai/phoenix/blob/main/app/src/pages/example/EditExampleDialog.tsx|EditExampleDialog.tsx>, <https://github.com/Arize-ai/phoenix/blob/main/app/src/pages/trace/SpanToDatasetExampleDialog.tsx|SpanToDatasetExampleDialog.tsx>). Would you like more detail on how the current JSON editing works or suggestions for possible UI improvements? Sources: - <https://github.com/Arize-ai/phoenix/blob/main/app/src/pages/example/EditExampleDialog.tsx|EditExampleDialog.tsx> - <https://github.com/Arize-ai/phoenix/blob/main/app/src/pages/trace/SpanToDatasetExampleDialog.tsx|SpanToDatasetExampleDialog.tsx>
💡 Hint: Mention RunLLM in the thread for followups.
Xander S.
·
Hey Zhuyi X., it sounds like you have in mind a form field?
Zhuyi X.
·
not exactly sure what you mean by a form field. I'm thinking of something like this for each of input, output, and metadata
Xander S.
·
It sounds like you mainly want a way to enter complex text and values
Zhuyi X.
·
yeah, that's basically it. The alternative is to do it programatically, but it's less convenient for adding ad-hoc examples.
👍1
Xander S.
·
Makes sense. There may be some subtleties to consider since we don't know the type of the value a priori without a schema on the dataset examples. Feel free to file us an enhancement request!
Zhuyi X.
·
I thought only text is allowed for the value, no?
Xander S.
·
You could have any valid JSON type as the value: text, list, object, etc.
Zhuyi X.
·
wait, I thought json has to be serialized to be a value, no? Otherwise, how does rendering work on the UI?
Xander S.
·
I just mean it's probably nicer to have a JSON editor than a plain text editor if the value is JSON.
Zhuyi X.
·
I added https://github.com/Arize-ai/phoenix/issues/8521
👍1