Custom variables don't interpolate into panel titles

[rdubrock]

I've got a few panels that are using both query and custom variables in their title. The query variables always interpolate correctly, but the custom variables do not. I've confirmed it has nothing to do with the values (if I switch a query variable to a custom variable with the same value, it no longer interpolates into the panel title).

An example of a panel:

new VizPanel({
    pluginId: 'barchart',
    $data: getQueryRunner(metrics),
    title: 'Response latency by phase: $probe ⮕ $job / $instance',  <= these three are a mix of custom and query variables
    ...

How the variables are set up:

 const probe = new QueryVariable({
    includeAll: true,
    allValue: '.*',
    defaultToAll: true,
    isMulti: true,
    name: 'probe',
    query: `label_values(sm_check_info{check_name="${checkType}"},probe)`,
    refresh: VariableRefresh.onDashboardLoad,
    datasource: metrics,
  });

   const job = new CustomVariable({
      name: 'job',
      value: checks[0].job,                <= this value is a string
      hide: VariableHide.hideVariable,
   });
   const instance = new CustomVariable({
      name: 'instance',
      value: checks[0].target,                 <= this value is a string
      hide: VariableHide.hideVariable,
   });

[torkelo]

@rdubrock variables have a value and text representation (think of them as id and display text), your only setting the value not the text representation. And in panel titles we use the text representation .

Possible PR to help with this scenario, but not sure it's the right thing
#591