Camunda Optimize - Analysis not working when flownode names contain dots

[venetrius]

Environment (Required on creation)

Reported Camunda Optimize 3.13.6
Reproduced: Camunda Optimize latest

Description (Required on creation; please attach any relevant screenshots, stacktraces, log files, etc. to the ticket)

When selecting a process instance in analyse tab, if an outlier flowNode name constaind a dot an error page is shown

Steps to reproduce (Required on creation)

1. Deploy process instance which has a flow nodes that contain dots . (e.g. flow.node.name.with.dot
   testFlowNodeNames.bpmn.zip
2. Trigger and complete a few instances
3. Trigger one more process instance and delay completion a few minutes to have at least one outlier
4. Navigate to Optimize #/analysis page
5. Select the process instance (e.g.: TestNameFlowNode)
6. Observe error

Observed Behavior (Required on creation)

The page renders an error

Expected behavior (Required on creation)

The page is rendered without error

Root Cause (Required on prioritization)

When making a flow node clickable in the heatMap the id is not sanitised

indicateClickableNodes = () => {
    if (this.props.data) {
      Object.keys(this.props.data).forEach((id) => {
        const node = document.body.querySelector(`[data-element-id=${id}]`);
        node?.classList.add('clickable');
      });
    }
  };

Solution Ideas

Use CSS.escape to handle special characters:

indicateClickableNodes = () => {
    if (this.props.data) {
      Object.keys(this.props.data).forEach((id) => {
        const node = document.body.querySelector(`[data-element-id=${CSS.escape(id)}]`);
        node?.classList.add('clickable');
      });
    }
  };

Hints

Similar error can be observed when a BPMN contains a multi instance subprocess. The same fix resolved that error as well.

Error screen shot

https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static

Links

• https://jira.camunda.com/browse/SUPPORT-24646
• https://jira.camunda.com/browse/SUPPORT-24426
• https://jira.camunda.com/browse/SUPPORT-25405

Breakdown

Pull Requests

Preview Give feedback

1. https://github.com/camunda/camunda-optimize/pull/15055

Dev2QA handover

• Does this ticket need a QA test and the testing goals are not clear from the description? Add a Dev2QA handover comment