[ML] Data Frame Analytics: Fix special character escaping for Vega scatterplot matrix.

[walterra]

Summary

Fixes #96609.

• Fixes correctly escaping the characters .[] in field names with double backslashes since Vega treats dots/brackets in field names special to be able to access attributes in object structures. See https://vega.github.io/vega-lite/docs/field.html for details. This replaces the old approach that replaced dots with a similar but different UTF-8 character but missed the brackets.
• Additionally adds an EuiErrorBoundary component around the VegaChart component so we don't crash the whole page should another issue with Vega bubble up.
• Note: There seems to be a bug in vega-lite which renders escaping backslashes in axis and legend titles, I created a bug report here.

Checklist

• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for breaking API changes and was labeled appropriately

[elasticmachine]

Pinging @elastic/ml-ui (:ml)

[qn895]

Tested the Vega charts and code LGTM 🎉 . Unrelated to this PR - I noticed there's an issue when picking fields with special characters in Regression or Classification, but we can probably fix this in a follow up PR in the future.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: ac4632c
• Storybooks Preview

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
ml	5.9MB	5.9MB	+5.0B

History

• 💔 Build #123271 failed e77b83f

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @walterra

[peteharverson]

Unrelated to this PR - I noticed there's an issue when picking fields with special characters in Regression or Classification, but we can probably fix this in a follow up PR in the future.

This looks like an issue with the _ml/data_frame/analytics/_explain endpoint, when one of the fields in the includes list contains a comma. For example running this query on the special_characters_2019 data set:

POST _ml/data_frame/analytics/_explain
{
   "description":"",
   "source":{
      "index":"special_characters_2019",
      "query":{
         "match_all":{
            
         }
      }
   },
   "analyzed_fields":{
      "includes":[
         "ampersand&name",
         "asterisk*name",
         "at@name",
         "colon:name",
         "comma,name"
      ]
   },
   "analysis":{
      "regression":{
         "dependent_variable":"metric%$£&!{(]field",
         "num_top_feature_importance_values":0,
         "training_percent":80
      }
   },
   "max_num_threads":1
}

Gives the error

{
  "error" : {
    "root_cause" : [
      {
        "type" : "status_exception",
        "reason" : "No field [comma] could be detected"
      }
    ],
    "type" : "status_exception",
    "reason" : "No field [comma] could be detected"
  },
  "status" : 400
}

[peteharverson]

Tested and LGTM. Will follow up the issue around the _explain endpoint separately (raised elastic/elasticsearch#72541)

[kibanamachine]

💚 Backport successful

Status	Branch	Result
✅	7.13
✅	7.x

The backport PRs will be merged automatically after passing CI.