diff --git a/packages/malloy-render/src/html/link.ts b/packages/malloy-render/src/html/link.ts index 8721bd84d..2e5cf383b 100644 --- a/packages/malloy-render/src/html/link.ts +++ b/packages/malloy-render/src/html/link.ts @@ -23,7 +23,7 @@ import {DataColumn, Explore, Field} from '@malloydata/malloy'; import {Renderer} from '../renderer'; -import {createErrorElement, createNullElement} from './utils'; +import {createErrorElement, createNullElement, getDynamicValue} from './utils'; import {LinkRenderOptions, StyleDefaults} from '../data_styles'; import {RendererOptions} from '../renderer_types'; import {RendererFactory} from '../renderer_factory'; @@ -50,6 +50,14 @@ export class HTMLLinkRenderer implements Renderer { ); } + const keyColumn = linkTag.tag('key_column')?.text(); + let key: string = data.value || ''; + if (keyColumn && data.parentRecord) { + const d = data.parentRecord.cell(keyColumn); + if (d && d.isString()) { + key = d.value + } + } // if a URL template is provided, replace the data were '$$$' appears. const urlTemplate = linkTag.text('url_template'); @@ -57,9 +65,9 @@ export class HTMLLinkRenderer implements Renderer { element.href = data.value; if (urlTemplate) { if (urlTemplate.indexOf('$$') > -1) { - element.href = urlTemplate.replace('$$', data.value); + element.href = urlTemplate.replace('$$', key); } else { - element.href = urlTemplate + data.value; + element.href = urlTemplate + key; } } element.target = '_blank'; diff --git a/test/src/render/__snapshots__/render.spec.ts.snap b/test/src/render/__snapshots__/render.spec.ts.snap index 3a286d9a2..691d12512 100644 --- a/test/src/render/__snapshots__/render.spec.ts.snap +++ b/test/src/render/__snapshots__/render.spec.ts.snap @@ -11848,6 +11848,93 @@ exports[`rendering results html renderer pivot table renders correctly 1`] = ` `; +exports[`rendering results link renderer data volume tags works correctly 1`] = ` + + + + + + + + + + + + + + + + + + + +
+ just_​link + + link_​append + + link_​substitue + + link_​with_​key + + key +
+ + http:/‌/‌123.com + + + + 4 + + + + 4 + + + + HTML Text + + + + 4 + +
+`; + exports[`rendering results number renderer value format tags works correctly 1`] = ` { }); }); + describe('link renderer', () => { + test('data volume tags works correctly', async () => { + const src = ` + query: bytes_query is duckdb.sql('SELECT 1 as one') -> { + select: + # link + just_link is "http://123.com" + # link.url_template="http://123.com/" + link_append is "4" + # link.url_template="http://123.com/$$/5" + link_substitue is "4" + # link{url_template="http://123.com/$$/5", key_column=key} + link_with_key is 'HTML Text' + key is "4" + } + `; + const result = await ( + await duckdb.loadModel(src).loadQueryByName('bytes_query') + ).run(); + const document = new JSDOM().window.document; + const html = await new HTMLView(document).render(result, { + dataStyles: {}, + }); + // console.log(html.outerHTML); + + expect(html).toMatchSnapshot(); + }); + }); + describe('duration renderer', () => { test('duration tags works correctly', async () => { const src = `