add key_column parameter to # link (#1798)

* add key_column parameter to # link * update with better whitespace
malloydata · Aug 5, 2024 · 9c1ce5f · 9c1ce5f
1 parent 78cb00c
commit 9c1ce5f
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 3 deletions.
diff --git 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,16 +50,24 @@ 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');
 
     const element = this.document.createElement('a');
     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
@@ -11848,6 +11848,93 @@ exports[`rendering results html renderer pivot table renders correctly 1`] = `
 </table>
 `;
 
+exports[`rendering results link renderer data volume tags works correctly 1`] = `
+<table
+  style="vertical-align: top; border-collapse: collapse; width: 100%;"
+>
+  <thead>
+    <tr>
+      <th
+        style="padding: 8px; text-align: left;"
+      >
+        just_link
+      </th>
+      <th
+        style="padding: 8px; text-align: left;"
+      >
+        link_append
+      </th>
+      <th
+        style="padding: 8px; text-align: left;"
+      >
+        link_substitue
+      </th>
+      <th
+        style="padding: 8px; text-align: left;"
+      >
+        link_with_key
+      </th>
+      <th
+        style="padding: 8px; text-align: left;"
+      >
+        key
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td
+        style="padding: 8px; vertical-align: top;"
+      >
+        <a
+          href="http://123.com"
+          target="_blank"
+        >
+          http:/‌/‌123.com
+        </a>
+      </td>
+      <td
+        style="padding: 8px; vertical-align: top;"
+      >
+        <a
+          href="http://123.com/4"
+          target="_blank"
+        >
+          4
+        </a>
+      </td>
+      <td
+        style="padding: 8px; vertical-align: top;"
+      >
+        <a
+          href="http://123.com/4/5"
+          target="_blank"
+        >
+          4
+        </a>
+      </td>
+      <td
+        style="padding: 8px; vertical-align: top;"
+      >
+        <a
+          href="http://123.com/4/5"
+          target="_blank"
+        >
+          HTML Text
+        </a>
+      </td>
+      <td
+        style="padding: 8px; vertical-align: top;"
+      >
+        <span>
+          4
+        </span>
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
 exports[`rendering results number renderer value format tags works correctly 1`] = `
 <table
   style="vertical-align: top; border-collapse: collapse; width: 100%;"

diff --git a/test/src/render/render.spec.ts b/test/src/render/render.spec.ts
@@ -645,6 +645,35 @@ describe('rendering results', () => {
     });
   });
 
+  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 = `