href not working in Vega Visualization

[wsmith-twc]

Describe the bug

I've tried to add hrefs to vega visualizations in several different ways, but while the cursor changes when hovering, clicking does not open the new page. The first example below tries to add the href under mark, but I get the same behavior when I add an href object under encoding.

I'm not entirely sure this is a bug vs a mistake I'm making, but I have too many link-like things below for the OpenSearch forums to accept my post.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://playground.opensearch.org/app/visualize
2. Create visualization
3. Click Vega
4. Replace line 83 containing: mark: line with:

  mark: {
    type: point
    href: https://www.opensearch.org
  }

5. Click Update
6. Mouse over one of the points and the cursor will change
7. Click or shift-click on a point and nothing happens

A second example that I'm not entirely sure is valid is:

1. Click on a bar in this vega editor example (from a stackoverflow question)
2. www.google.com will open after the click
3. Go to https://playground.opensearch.org/app/visualize
4. Create visualization
5. Click Vega
6. Copy the vega source from the vega editor example above into the OpenSearch Visualization
7. Click Update
8. Click on one of the bars and nothing happens

Expected behavior

A click or shift-click on a point in the first example will open https://www.opensearch.org.

A click or shift-click on a bar in the second example will open https://www.google.com

OpenSearch Version

Local version: 2.6.0 playground version: likely 2.6.0

Dashboards Version

Local version: 2.6.0 playground version: 2.6.0

Plugins

Local:

• opensearch-alerting 2.6.0.0
• opensearch-anomaly-detection 2.6.0.0
• opensearch-asynchronous-search 2.6.0.0
• opensearch-cross-cluster-replication 2.6.0.0
• opensearch-geospatial 2.6.0.0
• opensearch-index-management 2.6.0.0
• opensearch-job-scheduler 2.6.0.0
• opensearch-knn 2.6.0.0
• opensearch-ml 2.6.0.0
• opensearch-neural-search 2.6.0.0
• opensearch-notifications 2.6.0.0
• opensearch-notifications-core 2.6.0.0
• opensearch-observability 2.6.0.0
• opensearch-performance-analyzer 2.6.0.0
• opensearch-reports-scheduler 2.6.0.0
• opensearch-security 2.6.0.0
• opensearch-security-analytics 2.6.0.0
• opensearch-sql 2.6.0.0

Screenshots

Host/Environment (please complete the following information):

• OS: macOS 12.6.3
• Browser and version: Firefox 110.0, Safari 16.3

Additional context

[kavilla]

Hello @wsmith-twc,

Thanks for opening!

Could you provide the documentation that allows for passing href in the mark? Within the documentation in the vega editor: https://vega.github.io/vega-lite/docs/mark.html. Encoding can pass the href and it seems like you are trying to upload a static value to the mark instead of relying on the href be populated by the data point. Is that your goal?

Thanks again!

[wsmith-twc]

Ah, I made a mistake and found that approach in the vega (not lite) documentation. For example in https://vega.github.io/vega/docs/marks/text/

My goal is to have the url be dynamic based on the data, but for now I'm trying to have simple examples.

I do get the same behavior (cursor change on hover, but nothing on click) when I have the href in encoding. For example, take the example Vega visualization in the playground and modify it to set mark to point, add a transform to create url, and add an href under encoding like below (comments removed).

{
  $schema: https://vega.github.io/schema/vega-lite/v5.json
  title: Event counts from all indexes

  data: {
    url: {
      %context%: true
      %timefield%: @timestamp

      index: _all
      body: {
        aggs: {
          time_buckets: {
            date_histogram: {
              field: @timestamp
              interval: {%autointerval%: true}
              extended_bounds: {
                min: {%timefilter%: "min"}
                max: {%timefilter%: "max"}
              }
              min_doc_count: 0
            }
          }
        }
        size: 0
      }
    }

    format: {property: "aggregations.time_buckets.buckets"}
  }
  mark: point

  transform: [
    {
      calculate: "'https://www.opensearch.org' + '/downloads.html'"
      as: url
    }
  ]

  encoding: {
    x: {
      field: key
      type: temporal
      axis: {title: false}
    }
    y: {
      field: doc_count
      type: quantitative
      axis: {title: "Document count"}
    }
    href: {
      field: url
      type: nominal
    }
  }

Thanks for the help, @kavilla.

[sergio-faraldo]

I'm having the same issue here. It seems like it also was an issue on Kibana. The cursor changes, but nothing changes on click. Here's a link to the related issue on Kibana: https://github.com/elastic/kibana/issues/135788 I'll check on monday if it is indeed the exact same issue.

[sergio-faraldo]

Duplicate of #6285