fix: escape special characters in frontend altair chart builder

[mscolnick]

Fixes #5956

This escapes special characters in the chart builder for both the generated python code and generated vega spec.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
marimo-docs	Ready	Preview	Comment	Oct 28, 2025 7:39pm

To fully and safely escape field names, the escape function must also escape existing backslashes before escaping the other special characters. The fix is to add a .replace(/\\/g, "\\\\") as the first replacement operation in the chain. This ensures that any existing single backslash is replaced by double backslashes before any other characters are escaped. Only the function escapeFieldName in frontend/src/components/data-table/charts/chart-spec/utils.ts (starting at line 14) needs to be updated—specifically, the replacement chain at line 18 should begin by replacing all backslashes globally. No new imports are required.

---

To fix the incomplete escaping in escapeFieldName, first escape all backslashes in the input string before escaping other meta-characters (dot, brackets, colon). This is necessary because adding new backslashes for the other replacements would interact badly with pre-existing backslashes: if any of the target characters themselves follow a backslash, the double-escaping logic could break.

The best practice is to insert a replacement for all instances of \ with \\ at the start of the chain of replacements (on line 18 after the null/undefined check). The rest of the code can remain the same.

No new libraries, method definitions, or additional imports are required since this is simple string replacement with regular expressions.

The only change needed is in the function body, where the chained .replace calls begin.

---

The best way to fix this problem is to escape all backslashes in the input string before escaping the other special characters, i.e. add .replace(/\\/g, "\\\\") as the first escape in the chain. This ensures that any literal backslashes are not interpreted as escape prefixes when producing the output. The change should be made in the escapeFieldName function, at line 18, directly before the escapes for the other characters. No new packages or imports are required as this uses standard JavaScript string and regex facilities.

To fix this issue, we need to ensure that backslash characters (\) are escaped before any other characters in the field name. This is crucial to prevent malformed or incomplete escapes when the input string contains backslashes together with other special characters. The change should be made directly in the escapeFieldName function in frontend/src/components/data-table/charts/chart-spec/utils.ts, so that the first replacement call escapes backslashes globally using .replace(/\\/g, "\\\\"), before replacing other characters. No new libraries are required; native replace with global regex is sufficient for this context. Only the order of replacements and the addition of the backslash escape are needed.