@outsidedata/dolex 0.1.0

package/dist/src/renderers/html/builders/compound.js

@@ -0,0 +1,468 @@
+/**
+ * Self-contained HTML builder for compound visualizations.
+ *
+ * Produces a single HTML document with:
+ * - CSS grid layout for multiple views
+ * - Chart view delegating to existing pattern renderers
+ * - Data table view with sort, hover, and formatting
+ * - Interaction bus wiring linked highlights between views
+ */
+import { buildChartHtml } from '../index.js';
+/**
+ * JavaScript code for the data table renderer.
+ * Renders a sortable, hoverable table matching the dark design system.
+ */
+const TABLE_RENDER_JS = `
+function renderTable(container, data, tableSpec, interactionBus) {
+  tableSpec = tableSpec || {};
+  var columns = tableSpec.columns;
+  var sortState = tableSpec.sort || null;
+  var pageSize = tableSpec.pageSize || 200;
+
+  // Auto-detect columns from data if not specified
+  if (!columns || columns.length === 0) {
+    var keys = data.length > 0 ? Object.keys(data[0]) : [];
+    columns = keys.map(function(k) {
+      return { field: k, title: k };
+    });
+  }
+
+  // Detect numeric columns for right-alignment
+  var numericFields = new Set();
+  if (data.length > 0) {
+    columns.forEach(function(col) {
+      var sample = data.slice(0, 10).map(function(d) { return d[col.field]; });
+      var numCount = sample.filter(function(v) {
+        return v != null && typeof v === 'number' || (typeof v === 'string' && v !== '' && !isNaN(Number(v)));
+      }).length;
+      if (numCount > sample.length * 0.7) numericFields.add(col.field);
+    });
+  }
+
+  function formatCell(value, col) {
+    if (value == null) return '';
+    if (col.format && typeof d3 !== 'undefined' && d3.format) {
+      try { return d3.format(col.format)(Number(value)); } catch(e) {}
+    }
+    if (numericFields.has(col.field) && typeof value === 'number') {
+      if (Math.abs(value) >= 1e6) return (value / 1e6).toFixed(1) + 'M';
+      if (Math.abs(value) >= 1e3) return (value / 1e3).toFixed(1) + 'K';
+      if (Math.abs(value) < 1 && value !== 0) return value.toFixed(2);
+      return value.toLocaleString();
+    }
+    return String(value);
+  }
+
+  function getAlign(col) {
+    if (col.align) return col.align;
+    return numericFields.has(col.field) ? 'right' : 'left';
+  }
+
+  function getWidth(col) {
+    if (typeof col.width === 'number') return col.width + 'px';
+    switch (col.width) {
+      case 'narrow': return '80px';
+      case 'wide': return '200px';
+      case 'medium': default: return 'auto';
+    }
+  }
+
+  var sortedData = data.slice();
+  function applySort() {
+    if (!sortState) return;
+    var field = sortState.field;
+    var dir = sortState.direction === 'asc' ? 1 : -1;
+    sortedData.sort(function(a, b) {
+      var va = a[field], vb = b[field];
+      if (va == null) return 1;
+      if (vb == null) return -1;
+      if (typeof va === 'number' && typeof vb === 'number') return dir * (va - vb);
+      return dir * String(va).localeCompare(String(vb));
+    });
+  }
+  applySort();
+
+  // Limit rows
+  var displayData = sortedData.slice(0, pageSize);
+
+  function render() {
+    container.innerHTML = '';
+
+    var wrapper = document.createElement('div');
+    wrapper.style.cssText = 'width:100%;height:100%;overflow:auto;';
+
+    var table = document.createElement('table');
+    table.style.cssText =
+      'width:100%;border-collapse:collapse;font-family:Inter,system-ui,sans-serif;' +
+      'font-size:12px;color:#d1d5db;';
+
+    // Header
+    var thead = document.createElement('thead');
+    var headerRow = document.createElement('tr');
+    columns.forEach(function(col) {
+      var th = document.createElement('th');
+      th.textContent = col.title || col.field;
+      var isSorted = sortState && sortState.field === col.field;
+      var arrow = isSorted ? (sortState.direction === 'asc' ? ' \\u25B2' : ' \\u25BC') : '';
+      th.textContent = (col.title || col.field) + arrow;
+      th.style.cssText =
+        'padding:8px 12px;text-align:' + getAlign(col) + ';border-bottom:2px solid #2d3041;' +
+        'color:#9ca3af;font-weight:600;cursor:pointer;user-select:none;' +
+        'position:sticky;top:0;background:#0f1117;white-space:nowrap;' +
+        'width:' + getWidth(col) + ';';
+      th.addEventListener('click', function() {
+        if (sortState && sortState.field === col.field) {
+          sortState.direction = sortState.direction === 'asc' ? 'desc' : 'asc';
+        } else {
+          sortState = { field: col.field, direction: numericFields.has(col.field) ? 'desc' : 'asc' };
+        }
+        applySort();
+        displayData = sortedData.slice(0, pageSize);
+        render();
+      });
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+
+    // Body
+    var tbody = document.createElement('tbody');
+    displayData.forEach(function(row, rowIdx) {
+      var tr = document.createElement('tr');
+      tr.setAttribute('data-row-index', rowIdx);
+      tr.style.cssText = 'transition:background 0.1s;';
+
+      // Interaction hover
+      tr.addEventListener('mouseenter', function() {
+        tr.style.background = '#1a1d2e';
+        if (interactionBus) interactionBus.highlight(row);
+      });
+      tr.addEventListener('mouseleave', function() {
+        tr.style.background = '';
+        if (interactionBus) interactionBus.clearHighlight();
+      });
+
+      columns.forEach(function(col) {
+        var td = document.createElement('td');
+        td.textContent = formatCell(row[col.field], col);
+        td.style.cssText =
+          'padding:6px 12px;text-align:' + getAlign(col) + ';' +
+          'border-bottom:1px solid #1f2937;white-space:nowrap;';
+        tr.appendChild(td);
+      });
+      tbody.appendChild(tr);
+    });
+    table.appendChild(tbody);
+
+    // Row count footer
+    if (data.length > pageSize) {
+      var tfoot = document.createElement('tfoot');
+      var footRow = document.createElement('tr');
+      var footCell = document.createElement('td');
+      footCell.colSpan = columns.length;
+      footCell.style.cssText =
+        'padding:8px 12px;color:#6b7280;font-size:11px;border-top:1px solid #2d3041;';
+      footCell.textContent = 'Showing ' + displayData.length + ' of ' + data.length + ' rows';
+      footRow.appendChild(footCell);
+      tfoot.appendChild(footRow);
+      table.appendChild(tfoot);
+    }
+
+    wrapper.appendChild(table);
+    container.appendChild(wrapper);
+
+    // Store reference for interaction highlighting
+    container._tableBody = tbody;
+    container._tableColumns = columns;
+  }
+
+  render();
+
+  // Interaction bus subscriber: highlight matching rows
+  if (interactionBus) {
+    interactionBus.onHighlight(function(highlightRow) {
+      var tbody = container._tableBody;
+      if (!tbody) return;
+      var rows = tbody.querySelectorAll('tr');
+      rows.forEach(function(tr, i) {
+        var dataRow = displayData[i];
+        if (!dataRow) return;
+        var match = interactionBus.matchRow(dataRow, highlightRow);
+        tr.style.background = match ? '#1a1d2e' : '';
+      });
+    });
+
+    interactionBus.onClearHighlight(function() {
+      var tbody = container._tableBody;
+      if (!tbody) return;
+      var rows = tbody.querySelectorAll('tr');
+      rows.forEach(function(tr) { tr.style.background = ''; });
+    });
+  }
+}
+`;
+/**
+ * JavaScript code for the interaction bus.
+ * Lightweight pub/sub for linked highlighting between views.
+ */
+const INTERACTION_BUS_JS = `
+function createInteractionBus(interactions) {
+  var highlightCallbacks = [];
+  var clearCallbacks = [];
+  var fields = [];
+
+  // Collect all highlight interaction fields
+  (interactions || []).forEach(function(interaction) {
+    if (interaction.type === 'highlight' && interaction.field) {
+      fields.push(interaction.field);
+    }
+  });
+
+  return {
+    fields: fields,
+
+    highlight: function(row) {
+      highlightCallbacks.forEach(function(cb) { cb(row); });
+    },
+
+    clearHighlight: function() {
+      clearCallbacks.forEach(function(cb) { cb(); });
+    },
+
+    onHighlight: function(cb) {
+      highlightCallbacks.push(cb);
+    },
+
+    onClearHighlight: function(cb) {
+      clearCallbacks.push(cb);
+    },
+
+    matchRow: function(candidateRow, highlightRow) {
+      if (!highlightRow) return false;
+      return fields.some(function(field) {
+        return candidateRow[field] != null &&
+               highlightRow[field] != null &&
+               String(candidateRow[field]) === String(highlightRow[field]);
+      });
+    }
+  };
+}
+`;
+/**
+ * Build a self-contained HTML document for a compound visualization.
+ *
+ * Embeds the chart view (via iframe srcdoc from the existing builder) and
+ * the table view in a CSS grid layout with interaction wiring.
+ */
+export function buildCompoundHtml(spec) {
+    const layout = spec.layout || { type: 'rows' };
+    const sizes = layout.sizes || getDefaultSizes(spec.views);
+    const gap = layout.gap || 12;
+    // Find chart and table views
+    const chartView = spec.views.find(v => v.type === 'chart');
+    const tableView = spec.views.find(v => v.type === 'table');
+    // Build chart HTML from the chart view's spec
+    let chartHtml = '';
+    if (chartView?.chart) {
+        const fullChartSpec = {
+            ...chartView.chart,
+            data: spec.data,
+        };
+        chartHtml = buildChartHtml(fullChartSpec);
+        // Strip min-height so the chart fills its compound grid cell instead of
+        // forcing 500px (which overflows and clips legends/axes).
+        chartHtml = chartHtml
+            .replace(/min-height:\s*500px/g, 'height: 100%');
+    }
+    // Escape the chart HTML for embedding as srcdoc.
+    // CRITICAL: Replace </  with <\/ so the HTML parser doesn't find </script>
+    // inside the JS string literal and prematurely close the <script> block.
+    // In JS strings, \/ is equivalent to / (no-op escape), so values are preserved.
+    const safeJson = (v) => JSON.stringify(v).replace(/<\//g, '<\\/');
+    const chartHtmlEscaped = safeJson(chartHtml);
+    const gridTemplate = layout.type === 'columns'
+        ? `grid-template-columns: ${sizes.map(s => s + 'fr').join(' ')};grid-template-rows:1fr;`
+        : `grid-template-rows: ${sizes.map(s => s + 'fr').join(' ')};grid-template-columns:1fr;`;
+    const MAX_EMBED_ROWS = 10_000;
+    const tableSpecJson = safeJson(tableView?.table || {});
+    const cappedData = spec.data && spec.data.length > MAX_EMBED_ROWS ? spec.data.slice(0, MAX_EMBED_ROWS) : spec.data;
+    const dataJson = safeJson(cappedData);
+    const interactionsJson = safeJson(spec.interactions || []);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>${escapeHtml(spec.title || 'Compound Visualization')}</title>
+<style>
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+html, body {
+  width: 100%; height: 100%; overflow: hidden;
+  background: #0f1117; color: #d1d5db;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+}
+#compound-root {
+  width: 100%; height: 100%;
+  display: grid;
+  ${gridTemplate}
+  gap: ${gap}px;
+  padding: ${gap}px;
+}
+#chart-view {
+  min-height: 0; min-width: 0; overflow: hidden;
+  border-radius: 8px;
+}
+#chart-view iframe {
+  width: 100%; height: 100%; border: none;
+  border-radius: 8px;
+}
+#table-view {
+  min-height: 0; min-width: 0; overflow: hidden;
+  border-radius: 8px;
+  background: #0f1117;
+}
+</style>
+</head>
+<body>
+<div id="compound-root">
+  <div id="chart-view"></div>
+  <div id="table-view"></div>
+</div>
+
+<script src="https://d3js.org/d3.v7.min.js"><\/script>
+
+<script>
+${INTERACTION_BUS_JS}
+${TABLE_RENDER_JS}
+</script>
+
+<script>
+(function() {
+  var data = ${dataJson};
+  var tableSpec = ${tableSpecJson};
+  var interactions = ${interactionsJson};
+  var chartHtml = ${chartHtmlEscaped};
+
+  var bus = createInteractionBus(interactions);
+
+  // ── Render chart view ───────────────────────────────────────────────────
+  var chartContainer = document.getElementById('chart-view');
+  if (chartHtml) {
+    var iframe = document.createElement('iframe');
+    iframe.style.cssText = 'width:100%;height:100%;border:none;border-radius:8px;';
+    iframe.srcdoc = chartHtml;
+    chartContainer.appendChild(iframe);
+
+    // Wire interaction bus into the chart iframe
+    iframe.addEventListener('load', function() {
+      var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+      var iframeWin = iframe.contentWindow;
+
+      // Inject highlight behavior into chart SVG elements
+      function wireChartInteractions() {
+        if (!iframeDoc) return;
+        var svg = iframeDoc.querySelector('svg');
+        if (!svg) return;
+
+        // Find hoverable elements (rects, circles, paths with data)
+        var elements = svg.querySelectorAll('rect[data-value], circle[data-value], rect.bar, circle.dot, path.line-segment');
+
+        // Also look for common D3 rendered elements
+        var allRects = svg.querySelectorAll('rect');
+        var allCircles = svg.querySelectorAll('circle');
+
+        // Attach listeners to all interactive elements
+        [].forEach.call(allRects, function(el) {
+          el.addEventListener('mouseenter', function() {
+            // Try to find which data row this element corresponds to
+            var datum = findDatum(el, data, bus.fields);
+            if (datum) bus.highlight(datum);
+          });
+          el.addEventListener('mouseleave', function() {
+            bus.clearHighlight();
+          });
+        });
+
+        [].forEach.call(allCircles, function(el) {
+          el.addEventListener('mouseenter', function() {
+            var datum = findDatum(el, data, bus.fields);
+            if (datum) bus.highlight(datum);
+          });
+          el.addEventListener('mouseleave', function() {
+            bus.clearHighlight();
+          });
+        });
+
+        // Listen for highlight events from the bus to highlight chart elements
+        bus.onHighlight(function(row) {
+          [].forEach.call(allRects, function(el) {
+            var datum = findDatum(el, data, bus.fields);
+            if (datum && bus.matchRow(datum, row)) {
+              el.style.opacity = '1';
+              el.style.filter = 'brightness(1.3)';
+            } else if (el.getAttribute('fill') && el.getAttribute('fill') !== 'none') {
+              el.style.opacity = '0.3';
+              el.style.filter = '';
+            }
+          });
+          [].forEach.call(allCircles, function(el) {
+            var datum = findDatum(el, data, bus.fields);
+            if (datum && bus.matchRow(datum, row)) {
+              el.style.opacity = '1';
+              el.style.filter = 'brightness(1.3)';
+            } else if (el.getAttribute('fill') && el.getAttribute('fill') !== 'none' && el.getAttribute('r')) {
+              el.style.opacity = '0.3';
+              el.style.filter = '';
+            }
+          });
+        });
+
+        bus.onClearHighlight(function() {
+          [].forEach.call(allRects, function(el) {
+            el.style.opacity = '';
+            el.style.filter = '';
+          });
+          [].forEach.call(allCircles, function(el) {
+            el.style.opacity = '';
+            el.style.filter = '';
+          });
+        });
+      }
+
+      // Data-element matching heuristic
+      function findDatum(el, data, fields) {
+        // Try to match element text content or position to data
+        // This uses a heuristic: check the element's __data__ if D3 bound it
+        if (iframeWin && iframeWin.d3) {
+          var d3Data = iframeWin.d3.select(el).datum();
+          if (d3Data && typeof d3Data === 'object') return d3Data;
+        }
+        return null;
+      }
+
+      // D3 renders async, wait a tick
+      setTimeout(wireChartInteractions, 200);
+    });
+  }
+
+  // ── Render table view ──────────────────────────────────────────────────
+  var tableContainer = document.getElementById('table-view');
+  renderTable(tableContainer, data, tableSpec, bus);
+})();
+<\/script>
+</body>
+</html>`;
+}
+/** Default size ratios: chart gets 3, table gets 2 */
+function getDefaultSizes(views) {
+    return views.map(v => v.type === 'chart' ? 3 : 2);
+}
+function escapeHtml(str) {
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+//# sourceMappingURL=compound.js.map

package/dist/src/renderers/html/builders/compound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compound.js","sourceRoot":"","sources":["../../../../../src/renderers/html/builders/compound.ts"],"names":[],"mappings":"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"}

package/dist/src/renderers/html/builders/connected-dot-plot.d.ts

@@ -0,0 +1,3 @@
+import type { VisualizationSpec } from '../../../types.js';
+export declare function buildConnectedDotPlotHtml(spec: VisualizationSpec): string;
+//# sourceMappingURL=connected-dot-plot.d.ts.map

package/dist/src/renderers/html/builders/connected-dot-plot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected-dot-plot.d.ts","sourceRoot":"","sources":["../../../../../src/renderers/html/builders/connected-dot-plot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAI3D,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,iBAAiB,GAAG,MAAM,CAEzE"}

package/dist/src/renderers/html/builders/connected-dot-plot.js

@@ -0,0 +1,6 @@
+import { buildHtmlFromBundle } from '../template.js';
+import { connectedDotPlotBundle } from '../_generated/bundles.js';
+export function buildConnectedDotPlotHtml(spec) {
+    return buildHtmlFromBundle(spec, connectedDotPlotBundle);
+}
+//# sourceMappingURL=connected-dot-plot.js.map

package/dist/src/renderers/html/builders/connected-dot-plot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected-dot-plot.js","sourceRoot":"","sources":["../../../../../src/renderers/html/builders/connected-dot-plot.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,MAAM,UAAU,yBAAyB,CAAC,IAAuB;IAC/D,OAAO,mBAAmB,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC;AAC3D,CAAC"}

package/dist/src/renderers/html/builders/connected-scatter.d.ts

@@ -0,0 +1,3 @@
+import type { VisualizationSpec } from '../../../types.js';
+export declare function buildConnectedScatterHtml(spec: VisualizationSpec): string;
+//# sourceMappingURL=connected-scatter.d.ts.map

package/dist/src/renderers/html/builders/connected-scatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected-scatter.d.ts","sourceRoot":"","sources":["../../../../../src/renderers/html/builders/connected-scatter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAI3D,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,iBAAiB,GAAG,MAAM,CAEzE"}

package/dist/src/renderers/html/builders/connected-scatter.js

@@ -0,0 +1,6 @@
+import { buildHtmlFromBundle } from '../template.js';
+import { connectedScatterBundle } from '../_generated/bundles.js';
+export function buildConnectedScatterHtml(spec) {
+    return buildHtmlFromBundle(spec, connectedScatterBundle);
+}
+//# sourceMappingURL=connected-scatter.js.map

package/dist/src/renderers/html/builders/connected-scatter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connected-scatter.js","sourceRoot":"","sources":["../../../../../src/renderers/html/builders/connected-scatter.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,MAAM,UAAU,yBAAyB,CAAC,IAAuB;IAC/D,OAAO,mBAAmB,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC;AAC3D,CAAC"}

package/dist/src/renderers/html/builders/dashboard.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Self-contained HTML builder for dashboard visualizations.
+ *
+ * Produces a single HTML document with:
+ * - Header bar with title + global filter controls
+ * - CSS grid body with N chart panels
+ * - Each chart rendered via buildChartHtml() embedded as srcdoc iframe
+ * - Global filters operate client-side on pre-fetched data
+ * - Cross-filter interaction bus between views
+ */
+import type { DashboardSpec, VisualizationSpec } from '../../../types.js';
+/** Data payload for a resolved dashboard view — query results + resolved pattern */
+export interface DashboardViewData {
+    viewId: string;
+    data: Record<string, any>[];
+    spec: VisualizationSpec;
+}
+/**
+ * Build a self-contained HTML document for a dashboard.
+ *
+ * @param dashboardSpec - The dashboard specification
+ * @param viewData - Pre-resolved data + specs for each view
+ * @returns Complete HTML document string
+ */
+export declare function buildDashboardHtml(dashboardSpec: DashboardSpec, viewData: DashboardViewData[]): string;
+//# sourceMappingURL=dashboard.d.ts.map

package/dist/src/renderers/html/builders/dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../../../../src/renderers/html/builders/dashboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAG1E,oFAAoF;AACpF,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC5B,IAAI,EAAE,iBAAiB,CAAC;CACzB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,iBAAiB,EAAE,GAC5B,MAAM,CAiYR"}