Trace UI papercut: highlight searched text and change search box hint's wording.#20841
Conversation
Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>
Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>
🛠 DevTools 🛠
Install mlflow from this PRFor Databricks, use the following command: |
|
Documentation preview for e53f7c4 is available at: More info
|
Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>
Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>
Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>
|
/autoformat |
Signed-off-by: mlflow-app[bot] <mlflow-app[bot]@users.noreply.github.com>
| placeholder ?? | ||
| intl.formatMessage({ | ||
| defaultMessage: 'Search traces by request', | ||
| defaultMessage: 'Search traces by id, request, and response', |
There was a problem hiding this comment.
Can we add a comment that this is an OSS behavior and Databricks still continues to search by request only?
There was a problem hiding this comment.
Pull request overview
This PR improves the trace search functionality in the MLflow UI by updating the search box placeholder text to better reflect its capabilities, highlighting matched text in search results, and switching from searching within span.attributes.mlflow.spanInputs to the more comprehensive trace.text field.
Changes:
- Updated search box placeholder text from "Search traces by request" to "Search traces by id, request, and response"
- Added text highlighting functionality to visually mark search matches in the Request, Response, and Trace ID columns
- Changed backend search filter from
span.attributes.mlflow.spanInputstotrace.textfor broader search coverage
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/store/tracking/test_sqlalchemy_store.py | Updated tests to use trace.text instead of span.attributes.mlflow.spanInputs |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/utils/DisplayUtils.tsx | Added highlightSearchInText() function to wrap matched text in <mark> tags |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/hooks/useMlflowTraces.tsx | Changed filter to use trace.text instead of span.attributes.mlflow.spanInputs |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/hooks/useMlflowTraces.test.tsx | Updated test expectations for new filter syntax |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/cellRenderers/rendererFunctions.tsx | Integrated search highlighting for Request, Response, and Trace ID columns |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/cellRenderers/SessionHeaderCellRenderers.tsx | Added search highlighting support for session headers |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/GenAiTracesTableSessionGroupedRows.tsx | Passed searchQuery prop through component hierarchy |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/GenAiTracesTableSearchInput.tsx | Updated placeholder text to reflect broader search capabilities |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/GenAiTracesTableBody.utils.tsx | Extracted searchQuery from table metadata for cell renderers |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/GenAiTracesTableBody.tsx | Added searchQuery to table metadata |
| mlflow/server/js/src/shared/web-shared/genai-traces-table/GenAITracesTableBodyContainer.tsx | Added searchQuery prop and passed it to table body |
| mlflow/server/js/src/lang/default/en.json | Updated localization strings for new placeholder text |
| mlflow/server/js/src/experiment-tracking/components/experiment-page/components/traces-v3/TracesV3Logs.tsx | Passed searchQuery prop to table container |
| mlflow/server/js/src/experiment-tracking/components/experiment-page/components/traces-v3/TracesV3Logs.intg.test.tsx | Updated test to expect new placeholder text |
| mlflow/server/js/src/experiment-tracking/components/experiment-logged-models/ExperimentLoggedModelDetailsTraces.test.tsx | Updated test to expect new placeholder text |
| } | ||
| if (searchQuery) { | ||
| filter.push(`span.attributes.\`mlflow.spanInputs\` ILIKE '%${searchQuery}%'`); | ||
| filter.push(`trace.text ILIKE '%${searchQuery}%'`); |
There was a problem hiding this comment.
The search query is directly interpolated into the filter string without escaping special characters. This could cause the filter to break if users search for text containing single quotes (') or percent signs (%).
According to the Python tests (e.g., test_sqlalchemy_store.py line 5197), single quotes in filter strings need to be escaped as ' and percent signs as %%. Consider adding an escaping function to handle these characters before building the filter string.
For example:
- A search for "it's working" would generate: trace.text ILIKE '%it's working%' which would break the SQL syntax
- A search for "90%" would generate: trace.text ILIKE '%90%%' but the percent sign in the search term should be escaped as %%
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
| placeholder ?? | ||
| intl.formatMessage({ | ||
| defaultMessage: 'Search traces by request', | ||
| defaultMessage: 'Search traces by id, request, and response', |
There was a problem hiding this comment.
There's a discrepancy between the PR description and the actual code change. The PR description states the placeholder text should be "Search traces by id, request, or response" (using "or"), but the code implements "Search traces by id, request, and response" (using "and"). Additionally, the release notes mention "Search traces by request & response" which differs from both.
Please clarify which wording is intended and ensure consistency across the PR description, release notes, and code.
There was a problem hiding this comment.
Changed from "and response" to "or response".
| <div css={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={value}> | ||
| {value} | ||
| {displayValue} | ||
| </div> | ||
| ) : ( | ||
| <NullCell isComparing={isComparing} /> | ||
| ) | ||
| } | ||
| second={ | ||
| isComparing && | ||
| (otherValue ? ( | ||
| (displayOtherValue ? ( | ||
| <div css={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={otherValue}> |
There was a problem hiding this comment.
The title attribute should check if the value is a string before using it, similar to how it's done in SessionHeaderCellRenderers.tsx (lines 447, 459, 478). While formatResponseTitle() should return a string, adding a type guard would make the code more defensive and consistent with the rest of the codebase.
Consider changing:
title={value}totitle={typeof value === 'string' ? value : undefined}title={otherValue}totitle={typeof otherValue === 'string' ? otherValue : undefined}
There was a problem hiding this comment.
Current behavior, so ignoring this.
Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com>
|
/autoformat |
Signed-off-by: mlflow-app[bot] <mlflow-app[bot]@users.noreply.github.com>
…'s wording. (mlflow#20841) Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com> Signed-off-by: mlflow-app[bot] <mlflow-app[bot]@users.noreply.github.com> Co-authored-by: mlflow-app[bot] <mlflow-app[bot]@users.noreply.github.com>
…'s wording. (#20841) Signed-off-by: Pat Sukprasert <pattara.sk127@gmail.com> Signed-off-by: mlflow-app[bot] <mlflow-app[bot]@users.noreply.github.com> Co-authored-by: mlflow-app[bot] <mlflow-app[bot]@users.noreply.github.com>
Related Issues/PRs
#xxxWhat changes are proposed in this pull request?
How is this PR tested?
Screen.Recording.2026-02-16.at.12.41.29.PM.mov
Does this PR require documentation update?
Does this PR require updating the MLflow Skills repository?
Release Notes
Is this a user-facing change?
What component(s), interfaces, languages, and integrations does this PR affect?
Components
area/tracking: Tracking Service, tracking client APIs, autologgingarea/models: MLmodel format, model serialization/deserialization, flavorsarea/model-registry: Model Registry service, APIs, and the fluent client calls for Model Registryarea/scoring: MLflow Model server, model deployment tools, Spark UDFsarea/evaluation: MLflow model evaluation features, evaluation metrics, and evaluation workflowsarea/gateway: MLflow AI Gateway client APIs, server, and third-party integrationsarea/prompts: MLflow prompt engineering features, prompt templates, and prompt managementarea/tracing: MLflow Tracing features, tracing APIs, and LLM tracing functionalityarea/projects: MLproject format, project running backendsarea/uiux: Front-end, user experience, plotting, JavaScript, JavaScript dev serverarea/build: Build and test infrastructure for MLflowarea/docs: MLflow documentation pagesHow should the PR be classified in the release notes? Choose one:
rn/none- No description will be included. The PR will be mentioned only by the PR number in the "Small Bugfixes and Documentation Updates" sectionrn/breaking-change- The PR will be mentioned in the "Breaking Changes" sectionrn/feature- A new user-facing feature worth mentioning in the release notesrn/bug-fix- A user-facing bug fix worth mentioning in the release notesrn/documentation- A user-facing documentation change worth mentioning in the release notesShould this PR be included in the next patch release?
Yesshould be selected for bug fixes, documentation updates, and other small changes.Noshould be selected for new features and larger changes. If you're unsure about the release classification of this PR, leave this unchecked to let the maintainers decide.What is a minor/patch release?
Bug fixes, doc updates and new features usually go into minor releases.
Bug fixes and doc updates usually go into patch releases.