@malloydata/render 0.0.1

package/dist/html/container.d.ts

@@ -0,0 +1,21 @@
+import { Explore } from "@malloydata/malloy";
+import { DataStyles, StyleDefaults } from "../data_styles";
+import { DrillFunction } from "../drill";
+import { ChildRenderers, RenderTree } from "../renderer";
+export declare abstract class ContainerRenderer extends RenderTree {
+    childRenderers: ChildRenderers;
+    protected abstract childrenStyleDefaults: StyleDefaults;
+    makeChildRenderers(explore: Explore, document: Document, options: {
+        dataStyles: DataStyles;
+        isDrillingEnabled?: boolean;
+        onDrill?: DrillFunction;
+    }): void;
+    static make<Type extends ContainerRenderer>(c: new (document: Document, options: {
+        isDrillingEnabled?: boolean;
+        onDrill?: DrillFunction;
+    }) => Type, document: Document, exploreField: Explore, options: {
+        dataStyles: DataStyles;
+        isDrillingEnabled?: boolean;
+        onDrill?: DrillFunction;
+    }): Type;
+}

package/dist/html/container.js

@@ -0,0 +1,43 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerRenderer = void 0;
+const renderer_1 = require("../renderer");
+const html_view_1 = require("./html_view");
+class ContainerRenderer extends renderer_1.RenderTree {
+    constructor() {
+        super(...arguments);
+        this.childRenderers = {};
+    }
+    makeChildRenderers(explore, document, options) {
+        const result = {};
+        explore.intrinsicFields.forEach((field) => {
+            result[field.name] = (0, html_view_1.makeRenderer)(field, document, options, this.childrenStyleDefaults);
+        });
+        this.childRenderers = result;
+    }
+    // We can't use a normal constructor here because we need
+    //  we need to be fully constructed before we construct
+    //  our children.
+    static make(c, document, exploreField, options) {
+        const n = new c(document, {
+            isDrillingEnabled: options.isDrillingEnabled,
+            onDrill: options.onDrill,
+        });
+        n.makeChildRenderers(exploreField, document, options);
+        return n;
+    }
+}
+exports.ContainerRenderer = ContainerRenderer;
+//# sourceMappingURL=container.js.map

package/dist/html/currency.d.ts

@@ -0,0 +1,5 @@
+import { DataColumn } from "@malloydata/malloy";
+import { HTMLTextRenderer } from "./text";
+export declare class HTMLCurrencyRenderer extends HTMLTextRenderer {
+    getText(data: DataColumn): string | null;
+}

package/dist/html/currency.js

@@ -0,0 +1,32 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLCurrencyRenderer = void 0;
+const text_1 = require("./text");
+class HTMLCurrencyRenderer extends text_1.HTMLTextRenderer {
+    getText(data) {
+        if (data.isNull()) {
+            return null;
+        }
+        // TODO get this from renderer options
+        const unitText = "$";
+        const numText = data.number.value.toLocaleString("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        });
+        return `${unitText}${numText}`;
+    }
+}
+exports.HTMLCurrencyRenderer = HTMLCurrencyRenderer;
+//# sourceMappingURL=currency.js.map

package/dist/html/dashboard.d.ts

@@ -0,0 +1,7 @@
+import { DataArrayOrRecord } from "@malloydata/malloy";
+import { StyleDefaults } from "../data_styles";
+import { ContainerRenderer } from "./container";
+export declare class HTMLDashboardRenderer extends ContainerRenderer {
+    protected childrenStyleDefaults: StyleDefaults;
+    render(table: DataArrayOrRecord): Promise<HTMLElement>;
+}

package/dist/html/dashboard.js

@@ -0,0 +1,224 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLDashboardRenderer = void 0;
+const drill_1 = require("../drill");
+const container_1 = require("./container");
+const text_1 = require("./text");
+const utils_1 = require("./utils");
+class HTMLDashboardRenderer extends container_1.ContainerRenderer {
+    constructor() {
+        super(...arguments);
+        this.childrenStyleDefaults = {
+            size: "medium",
+        };
+    }
+    async render(table) {
+        if (!table.isArrayOrRecord()) {
+            return (0, utils_1.createErrorElement)(this.document, "Invalid data for dashboard renderer.");
+        }
+        const fields = table.field.intrinsicFields;
+        const dimensions = fields.filter((field) => field.isAtomicField() && field.sourceWasDimension());
+        const measures = fields.filter((field) => !field.isAtomicField() || field.sourceWasMeasureLike());
+        const body = this.document.createElement("div");
+        for (const row of table) {
+            const dimensionsContainer = this.document.createElement("div");
+            dimensionsContainer.classList.add("dimensions");
+            dimensionsContainer.style.display = "flex";
+            dimensionsContainer.style.flexWrap = "wrap";
+            const rowElement = this.document.createElement("div");
+            rowElement.style.position = "relative";
+            for (const field of dimensions) {
+                const renderer = this.childRenderers[field.name];
+                const rendered = await renderer.render(row.cell(field));
+                const renderedDimension = this.document.createElement("div");
+                renderedDimension.style.cssText = DIMENSION_BOX;
+                const dimensionTitle = this.document.createElement("div");
+                dimensionTitle.style.cssText = DIMENSION_TITLE;
+                dimensionTitle.appendChild(this.document.createTextNode(field.name));
+                const dimensionInner = this.document.createElement("div");
+                dimensionInner.style.cssText = VERTICAL_CENTER;
+                dimensionInner.appendChild(rendered);
+                renderedDimension.appendChild(dimensionTitle);
+                renderedDimension.appendChild(dimensionInner);
+                dimensionsContainer.appendChild(renderedDimension);
+            }
+            if (dimensions.length > 0) {
+                const rowSeparatorOuter = this.document.createElement("div");
+                rowSeparatorOuter.classList.add("row-separator-outer");
+                rowSeparatorOuter.style.cssText = ROW_SEPARATOR_OUTER;
+                const rowSeparator = this.document.createElement("div");
+                rowSeparator.style.cssText = ROW_SEPARATOR;
+                rowSeparatorOuter.appendChild(rowSeparator);
+                dimensionsContainer.appendChild(rowSeparatorOuter);
+            }
+            const measuresContainer = this.document.createElement("div");
+            measuresContainer.style.cssText = MEASURE_BOXES;
+            for (const field of measures) {
+                const childRenderer = this.childRenderers[field.name];
+                await (0, utils_1.yieldTask)();
+                const rendered = await childRenderer.render(row.cell(field));
+                if (childRenderer instanceof HTMLDashboardRenderer) {
+                    measuresContainer.appendChild(rendered);
+                }
+                else if (childRenderer instanceof text_1.HTMLTextRenderer) {
+                    const measureBox = this.document.createElement("div");
+                    measureBox.style.cssText = MEASURE_BOX;
+                    const measureTitle = this.document.createElement("div");
+                    measureTitle.style.cssText = TITLE;
+                    measureTitle.appendChild(this.document.createTextNode(field.name));
+                    const measureInner = this.document.createElement("div");
+                    measureInner.style.cssText = VERTICAL_CENTER;
+                    const innerInner = this.document.createElement("div");
+                    innerInner.style.cssText = SINGLE_VALUE;
+                    innerInner.appendChild(rendered);
+                    measureInner.appendChild(innerInner);
+                    measureBox.appendChild(measureTitle);
+                    measureBox.appendChild(measureInner);
+                    measuresContainer.appendChild(measureBox);
+                }
+                else {
+                    const measureBox = this.document.createElement("div");
+                    measureBox.style.cssText = MEASURE_BOX;
+                    const measureTitle = this.document.createElement("div");
+                    measureTitle.style.cssText = TITLE;
+                    measureTitle.appendChild(this.document.createTextNode(field.name));
+                    const measureInner = this.document.createElement("div");
+                    measureInner.style.cssText = VERTICAL_CENTER;
+                    const innerInner = this.document.createElement("div");
+                    innerInner.style.cssText = HORIZONTAL_CENTER;
+                    innerInner.appendChild(rendered);
+                    measureInner.appendChild(innerInner);
+                    measureBox.appendChild(measureTitle);
+                    measureBox.appendChild(measureInner);
+                    measuresContainer.appendChild(measureBox);
+                }
+            }
+            rowElement.appendChild(dimensionsContainer);
+            if (dimensions.length > 0 && this.options.isDrillingEnabled) {
+                const drillElement = this.document.createElement("span");
+                const drillIcon = (0, utils_1.createDrillIcon)(this.document);
+                drillElement.appendChild(drillIcon);
+                drillElement.style.cssText = `padding: 8px; vertical-align: top; width: 25px; cursor: pointer; position: absolute; top: 5px; right: 5px;`;
+                drillElement.onclick = () => {
+                    if (this.options.onDrill) {
+                        const { drillQuery, drillFilters } = (0, drill_1.getDrillQuery)(row);
+                        this.options.onDrill(drillQuery, drillIcon, drillFilters);
+                    }
+                };
+                rowElement.appendChild(drillElement);
+            }
+            const dashboardOuter = this.document.createElement("div");
+            dashboardOuter.classList.add("dashboard-outer");
+            dashboardOuter.style.cssText = DASHBOARD_OUTER;
+            if (dimensions.length > 0) {
+                const nestIndicator = this.document.createElement("div");
+                nestIndicator.style.cssText = NEST_INDICATOR;
+                dashboardOuter.appendChild(nestIndicator);
+            }
+            dashboardOuter.appendChild(measuresContainer);
+            rowElement.appendChild(dashboardOuter);
+            body.appendChild(rowElement);
+        }
+        return body;
+    }
+}
+exports.HTMLDashboardRenderer = HTMLDashboardRenderer;
+const ROW_SEPARATOR_OUTER = `
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex: 1 0 auto;
+`;
+const DASHBOARD_OUTER = `
+  display: flex;
+  flex-direction: row;
+  font-size: 11px;
+`;
+const NESTING_DIV = `
+  background-color: var(--malloy-tile-background-color, #f7f7f7);
+  border: 1px solid var(--malloy-border-color, #e9e9e9);
+`;
+const NEST_INDICATOR = `
+  ${NESTING_DIV}
+  min-height: 100%;
+  min-width: 11px;
+  margin: 6px;
+  border-radius: 4px;
+`;
+const ROW_SEPARATOR = `
+  ${NESTING_DIV}
+  min-height: 11px;
+  max-height: 11px;
+  margin: 6px;
+  flex: 1 0 auto;
+  border-radius: 4px;
+`;
+const MEASURE_BOXES = `
+  display: flex;
+  flex-wrap: wrap;
+`;
+const DIMENSION_BOX = `
+  background-color: var(--malloy-tile-background-color, #f7f7f7);
+  border: 1px solid var(--malloy-border-color, #e9e9e9);
+  margin: 6px;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: 0 1px 5px 0 var(--malloy-border-color, #f3f3f3);
+`;
+const MEASURE_BOX = `
+  margin: 6px;
+  border-radius: 5px;
+  border: 1px solid var(--malloy-border-color, #e9e9e9);
+  padding: 10px;
+  flex: 1 0 auto;
+  box-shadow: 0 1px 5px 0 var(--malloy-tile-background-color, #f3f3f3);
+  max-width: calc(100% - 11px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const DIMENSION_TITLE = `
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--malloy-title-color, #505050);
+  margin-bottom: 5px;
+  font-family: var(--malloy-font-family, "Roboto");
+`;
+const TITLE = `
+  font-size: 11px;
+  font-family: var(--malloy-font-family, "Roboto");
+  font-weight: 500;
+  color: #var(--malloy-title-color, #505050);
+`;
+const SINGLE_VALUE = `
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 5px;
+`;
+const VERTICAL_CENTER = `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 0 auto;
+`;
+const HORIZONTAL_CENTER = `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
+//# sourceMappingURL=dashboard.js.map

package/dist/html/date.d.ts

@@ -0,0 +1,7 @@
+import { DataColumn } from "@malloydata/malloy";
+import { Renderer } from "../renderer";
+export declare class HTMLDateRenderer implements Renderer {
+    private readonly document;
+    constructor(document: Document);
+    render(data: DataColumn): Promise<HTMLElement>;
+}

package/dist/html/date.js

@@ -0,0 +1,38 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLDateRenderer = void 0;
+const malloy_1 = require("@malloydata/malloy");
+const utils_1 = require("./utils");
+class HTMLDateRenderer {
+    constructor(document) {
+        this.document = document;
+    }
+    async render(data) {
+        if (data.isNull()) {
+            return (0, utils_1.createNullElement)(this.document);
+        }
+        if (!data.isDate() && !data.isTimestamp()) {
+            return (0, utils_1.createErrorElement)(this.document, "Invalid field for date renderer");
+        }
+        const timeframe = data.field.timeframe ||
+            (data.isTimestamp() ? malloy_1.TimestampTimeframe.Second : malloy_1.DateTimeframe.Day);
+        const timestring = (0, utils_1.timeToString)(data.value, timeframe);
+        const element = this.document.createElement("span");
+        element.appendChild(this.document.createTextNode(timestring));
+        return element;
+    }
+}
+exports.HTMLDateRenderer = HTMLDateRenderer;
+//# sourceMappingURL=date.js.map

package/dist/html/html_view.d.ts

@@ -0,0 +1,23 @@
+import { DataArray, Field, Explore } from "@malloydata/malloy";
+import { DataStyles, StyleDefaults } from "../data_styles";
+import { Renderer } from "../renderer";
+import { DrillFunction } from "../drill";
+export declare class HTMLView {
+    private readonly document;
+    constructor(document: Document);
+    render(table: DataArray, options: {
+        dataStyles: DataStyles;
+        isDrillingEnabled?: boolean;
+        onDrill?: DrillFunction;
+    }): Promise<HTMLElement>;
+}
+export declare class JSONView {
+    private readonly document;
+    constructor(document: Document);
+    render(table: DataArray): Promise<HTMLElement>;
+}
+export declare function makeRenderer(field: Explore | Field, document: Document, options: {
+    dataStyles: DataStyles;
+    isDrillingEnabled?: boolean;
+    onDrill?: DrillFunction;
+}, styleDefaults: StyleDefaults): Renderer;

package/dist/html/html_view.js

@@ -0,0 +1,217 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeRenderer = exports.JSONView = exports.HTMLView = void 0;
+const bar_chart_1 = require("./bar_chart");
+const boolean_1 = require("./boolean");
+const json_1 = require("./json");
+const bytes_1 = require("./bytes");
+const currency_1 = require("./currency");
+const percent_1 = require("./percent");
+const dashboard_1 = require("./dashboard");
+const image_1 = require("./image");
+const date_1 = require("./date");
+const line_chart_1 = require("./line_chart");
+const link_1 = require("./link");
+const list_1 = require("./list");
+const list_detail_1 = require("./list_detail");
+const number_1 = require("./number");
+const point_map_1 = require("./point_map");
+const scatter_chart_1 = require("./scatter_chart");
+const segment_map_1 = require("./segment_map");
+const shape_map_1 = require("./shape_map");
+const table_1 = require("./table");
+const text_1 = require("./text");
+const vega_spec_1 = require("./vega_spec");
+const container_1 = require("./container");
+const malloy_1 = require("@malloydata/malloy");
+const utils_1 = require("./utils");
+class HTMLView {
+    constructor(document) {
+        this.document = document;
+    }
+    async render(table, options) {
+        const renderer = makeRenderer(table.field, this.document, options, {
+            size: "large",
+        });
+        try {
+            // TODO Implement row streaming capability for some renderers: some renderers should be usable
+            //      as a builder with `begin(field: StructDef)`, `row(field: StructDef, row: QueryDataRow)`,
+            //      and `end(field: StructDef)` methods.
+            //      Primarily, this should be possible for the `table` and `dashboard` renderers.
+            //      This would only be used at this top level (and HTML view should support `begin`,
+            //      `row`, and `end` as well).
+            return await renderer.render(table);
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                return (0, utils_1.createErrorElement)(this.document, error);
+            }
+            else {
+                return (0, utils_1.createErrorElement)(this.document, "Internal error - Exception not an Error object.");
+            }
+        }
+    }
+}
+exports.HTMLView = HTMLView;
+class JSONView {
+    constructor(document) {
+        this.document = document;
+    }
+    async render(table) {
+        const renderer = new json_1.HTMLJSONRenderer(this.document);
+        try {
+            return await renderer.render(table);
+        }
+        catch (error) {
+            if (error instanceof Error) {
+                return (0, utils_1.createErrorElement)(this.document, error);
+            }
+            else {
+                return (0, utils_1.createErrorElement)(this.document, "Internal error - Exception not an Error object.");
+            }
+        }
+    }
+}
+exports.JSONView = JSONView;
+function getRendererOptions(field, dataStyles) {
+    let renderer = dataStyles[field.name];
+    if (!renderer) {
+        for (const sourceClass of field.sourceClasses) {
+            if (!renderer) {
+                renderer = dataStyles[sourceClass];
+            }
+        }
+    }
+    return renderer;
+}
+function isContainer(field) {
+    if (field.isExplore()) {
+        return field;
+    }
+    else {
+        throw new Error(`${field.name} does not contain fields and cannot be rendered this way`);
+    }
+}
+function makeRenderer(field, document, options, styleDefaults) {
+    const renderDef = getRendererOptions(field, options.dataStyles) || {};
+    if (renderDef.renderer === "shape_map" || field.name.endsWith("_shape_map")) {
+        return new shape_map_1.HTMLShapeMapRenderer(document, styleDefaults, renderDef);
+    }
+    else if (renderDef.renderer === "point_map" ||
+        field.name.endsWith("_point_map")) {
+        return new point_map_1.HTMLPointMapRenderer(document, styleDefaults);
+    }
+    else if (renderDef.renderer === "image" || field.name.endsWith("_image")) {
+        return new image_1.HTMLImageRenderer(document);
+    }
+    else if (renderDef.renderer === "segment_map" ||
+        field.name.endsWith("_segment_map")) {
+        return new segment_map_1.HTMLSegmentMapRenderer(document, styleDefaults, renderDef);
+    }
+    else if (renderDef.renderer === "dashboard" ||
+        field.name.endsWith("_dashboard")) {
+        return container_1.ContainerRenderer.make(dashboard_1.HTMLDashboardRenderer, document, isContainer(field), options);
+    }
+    else if (renderDef.renderer === "json" || field.name.endsWith("_json")) {
+        return new json_1.HTMLJSONRenderer(document);
+    }
+    else if (renderDef.renderer === "line_chart" ||
+        field.name.endsWith("_line_chart")) {
+        return new line_chart_1.HTMLLineChartRenderer(document, styleDefaults, renderDef);
+    }
+    else if (renderDef.renderer === "scatter_chart" ||
+        field.name.endsWith("_scatter_chart")) {
+        return new scatter_chart_1.HTMLScatterChartRenderer(document, styleDefaults);
+    }
+    else if (renderDef.renderer === "bar_chart") {
+        return new bar_chart_1.HTMLBarChartRenderer(document, styleDefaults, renderDef);
+    }
+    else if (field.name.endsWith("_bar_chart")) {
+        return new bar_chart_1.HTMLBarChartRenderer(document, styleDefaults, {});
+    }
+    else if (renderDef.renderer === "vega") {
+        const spec = renderDef.spec;
+        if (spec) {
+            return new vega_spec_1.HTMLVegaSpecRenderer(document, styleDefaults, spec);
+        }
+        else if (renderDef.spec_name) {
+            const vegaRenderer = options.dataStyles[renderDef.spec_name];
+            if (vegaRenderer !== undefined && vegaRenderer.renderer === "vega") {
+                if (vegaRenderer.spec) {
+                    return new vega_spec_1.HTMLVegaSpecRenderer(document, styleDefaults, vegaRenderer.spec);
+                }
+                else {
+                    throw new Error(`No spec defined on ${renderDef.spec_name}`);
+                }
+            }
+            else {
+                throw new Error(`No Vega renderer named ${renderDef.spec_name}`);
+            }
+        }
+        else {
+            throw new Error(`No top level vega spec defined for ${field.name}`);
+        }
+    }
+    else {
+        if (renderDef.renderer === "time" ||
+            (field.hasParentExplore() &&
+                field.isAtomicField() &&
+                (field.type === malloy_1.AtomicFieldType.Date ||
+                    field.type === malloy_1.AtomicFieldType.Timestamp))) {
+            return new date_1.HTMLDateRenderer(document);
+        }
+        else if (renderDef.renderer === "currency") {
+            return new currency_1.HTMLCurrencyRenderer(document);
+        }
+        else if (renderDef.renderer === "percent") {
+            return new percent_1.HTMLPercentRenderer(document);
+        }
+        else if (renderDef.renderer === "number" ||
+            (field.hasParentExplore() &&
+                field.isAtomicField() &&
+                field.type === malloy_1.AtomicFieldType.Number)) {
+            return new number_1.HTMLNumberRenderer(document);
+        }
+        else if (renderDef.renderer === "bytes") {
+            return new bytes_1.HTMLBytesRenderer(document);
+        }
+        else if (renderDef.renderer === "boolean" ||
+            (field.hasParentExplore() &&
+                field.isAtomicField() &&
+                field.type === malloy_1.AtomicFieldType.Boolean)) {
+            return new boolean_1.HTMLBooleanRenderer(document);
+        }
+        else if (renderDef.renderer === "link" || field.name.endsWith("_url")) {
+            return new link_1.HTMLLinkRenderer(document);
+        }
+        else if (renderDef.renderer === "list" || field.name.endsWith("_list")) {
+            return container_1.ContainerRenderer.make(list_1.HTMLListRenderer, document, isContainer(field), options);
+        }
+        else if (renderDef.renderer === "list_detail" ||
+            field.name.endsWith("_list_detail")) {
+            return container_1.ContainerRenderer.make(list_detail_1.HTMLListDetailRenderer, document, isContainer(field), options);
+        }
+        else if (renderDef.renderer === "table" ||
+            !field.hasParentExplore() ||
+            field.isExploreField()) {
+            return container_1.ContainerRenderer.make(table_1.HTMLTableRenderer, document, isContainer(field), options);
+        }
+        else {
+            return new text_1.HTMLTextRenderer(document);
+        }
+    }
+}
+exports.makeRenderer = makeRenderer;
+//# sourceMappingURL=html_view.js.map

package/dist/html/image.d.ts

@@ -0,0 +1,7 @@
+import { DataColumn } from "@malloydata/malloy";
+import { Renderer } from "../renderer";
+export declare class HTMLImageRenderer implements Renderer {
+    private readonly document;
+    constructor(document: Document);
+    render(data: DataColumn): Promise<HTMLElement>;
+}

package/dist/html/image.js

@@ -0,0 +1,34 @@
+"use strict";
+/*
+ * Copyright 2021 Google LLC
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * version 2 as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLImageRenderer = void 0;
+const utils_1 = require("./utils");
+class HTMLImageRenderer {
+    constructor(document) {
+        this.document = document;
+    }
+    async render(data) {
+        if (!data.isString()) {
+            return (0, utils_1.createErrorElement)(this.document, "Invalid field for Image renderer");
+        }
+        if (data.isNull()) {
+            return (0, utils_1.createNullElement)(this.document);
+        }
+        const element = this.document.createElement("img");
+        element.src = data.value;
+        return element;
+    }
+}
+exports.HTMLImageRenderer = HTMLImageRenderer;
+//# sourceMappingURL=image.js.map

package/dist/html/index.d.ts

@@ -0,0 +1 @@
+export { HTMLView } from "./html_view";