Use template string on Fold titles for annotations

Author: VeraZab

src/components/containers/AnnotationAccordion.js

@@ -4,24 +4,33 @@ import {PanelMessage} from './PanelEmpty';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAnnotationToLayout} from 'lib';
+import {templateString} from 'plotly.js/src/lib';
 
 const AnnotationFold = connectAnnotationToLayout(PlotlyFold);
 
 class AnnotationAccordion extends Component {
   render() {
     const {
-      layout: {annotations = []},
+      layout: {annotations = [], meta = []},
       localize: _,
     } = this.context;
     const {canAdd, children} = this.props;
 
     const content =
       annotations.length &&
-      annotations.map((ann, i) => (
-        <AnnotationFold key={i} annotationIndex={i} name={ann.text} canDelete={canAdd}>
-          {children}
-        </AnnotationFold>
-      ));
+      annotations.map((ann, i) => {
+        const textPostTemplate = templateString(ann.text, {meta});
+        return (
+          <AnnotationFold
+            key={i}
+            annotationIndex={i}
+            name={textPostTemplate === '' ? ann.text : textPostTemplate}
+            canDelete={canAdd}
+          >
+            {children}
+          </AnnotationFold>
+        );
+      });
 
     const addAction = {
       label: _('Annotation'),