@malloydata/render 0.0.210-dev241105194407 → 0.0.210-dev241107210431

package/.storybook/preview.ts

@@ -11,10 +11,11 @@ async function createConnection() {
   });
   await connection.connecting;
   for (let tableName of registeredData) {
-    const fullTableName = `data/${tableName}`;
+    const tableUrl = `data/${tableName}`;
+    const fullTableName = `static/${tableUrl}`;
     await connection.registerRemoteTable(
       fullTableName,
-      new window.URL(fullTableName, window.location.href).toString()
+      new window.URL(tableUrl, window.location.href).toString()
     );
   }
   memoConnection = connection;

package/DEVELOPING.md

@@ -0,0 +1,134 @@
+# Developing the Malloy Renderer
+
+The Malloy Renderer is developed in the `src` folder of this repository. The following sections provide guidance on how to develop, view, and debug local changes.
+
+## New vs. Legacy renderer code
+
+The legacy renderer is deprecated but is still available and in use for features not yet implemented in the new renderer. This legacy code lives in the `src/html` directory.
+
+## Viewing the renderer locally
+
+Storybook is used to view the renderer locally. To launch the storybook:
+
+```bash
+$ npm run storybook
+```
+
+Then navigate to the URL provided. In this storybook, you can navigate between different stories that render Malloy queries from the Malloy source code.
+
+### Tips
+
+This storybook does not hot reload, so you need to reload the page when:
+
+- you make changes to malloy-render source code
+- you add a new story
+
+If you make changes to the malloy core package, you need to relaunch the storybook.
+
+It is fairly common for Malloy compilation to randomly fail when opening the storybook. A simple reload of the page fixes the problem.
+
+## Adding new stories for viewing the renderer
+
+Stories are generated using `*.stories.malloy` files in src/stories. By default, the filename is used to produce a component name in the storybook. This can be customized using a model tag:
+
+```malloy
+// in charts.stories.malloy
+
+##(story) component='My Charts'
+
+source: ...
+```
+
+Stories are generated for any view annotated as `#(story)`. By default, the view name is used to produce the story name. This can be customized on the tag like so:
+
+```malloy
+// in charts.stories.malloy
+
+source: ... {
+
+    // Title will automatically be "My Story"
+    #(story)
+    view: my_story is { ... }
+
+    // Title will be "Custom Title"
+    #(story) story='Custom Title'
+    view: another_story is { ... }
+}
+```
+
+### Adding new data sources for stories
+
+Data sources have to be registered in advance when creating stories. To add new data sources:
+
+1. Add the new data file to `src/stories/static/data`
+2. Register the new source by updating `.storybook/registered_data.json` with the new file name and extension.
+3. Import the data in your `stories.malloy` files in `src/stories` like so:
+
+```malloy
+source: foo is duckdb.table("static/data/my_file.csv");
+```
+
+## Adding new renderers
+
+Renderers are applied based on tags parsed on an Explore or Field. This is done in the file `src/component/apply-renderer.tsx`. To add a new renderer in this file:
+
+1. Update the `shouldRenderAs` function that looks at the field tags and returns an enum for your renderer type
+2. Update the switch statement in the `applyRenderer` function to add a case for your new renderer. Your case statement should update the `renderValue` variable using your renderer.
+
+## Renderer Metadata
+
+Some of the renderers, especially charts, benefit from having metadata about the data table being rendered. This can include attributes like the min and max values in a numeric column, the number of rows in a nested table, etc. This metadata is derived in `src/component/render-result-metadata.ts`. The `getResultMetadata` function is used to create the `RenderResultMetadata` object. This object is shared throughout our SolidJS component tree using the Context api. To access the metadata, use the `useResultContext()` method in a component.
+
+## Adding new charts
+
+Charts are typically rendered using a Vega spec via the generic `Chart` component in `src/component/chart/chart.tsx`. We precompile Vega runtimes for each chart column in a query. This is done in the render result metadata creation. In the function `populateExploreMeta`, you can see examples of checking for chart tags and if finding them, creating the Vega spec and runtime for the charts in that column. Your Vega chart code should return a `VegaChartProps` object. See the examples in `populateExploreMeta` for the bar and line charts.
+
+### Tips
+
+- The `src/component/chart-layout-settings.ts` file is a useful file that uses metadata about a chart Explore to derive important chart attributes like padding, axes sizes, and total chart sizes that need to be encoded into a chart Vega spec.
+- Vega does not provide typings for sub compenents of the Vega spec, so we currently have to resort to using a vega spec type of `any`, exported as the type `VegaSpec`.
+- The bar chart and line chart specs are good examples to look at for how to create chart code. They show among other things:
+  - Deriving chart configurations from chart tags and nested tags
+  - Getting chart layout settings and using them
+  - Defining chart interactions
+  - Mapping source Result data to chart-ready data
+  - Implementing tooltip behaviors
+
+## Chart interactions
+
+In the renderer, chart interactions are shared across charts using the same dimensions or measures. This sharing of interactions is made possible through a proxy store called the ResultStore and found in `src/component/result-store/result-store.ts`. The interactions are shared in a data structure called a Brush. A Brush represents a currently highlighted value for a specific dimension or measure.
+
+When `chart.tsx` renders a Vega chart, it checks to see if the chart runtime has a signal defined for `brushIn`. If it does, it passes an array of the brushes relevant to that chart via the `brushIn` signal. The chart can then use that `brushIn` data to determine how to render brushes. For example, for a measure brush the chart may show a reference line.
+
+It is highly recommened to only render brushes based on data coming in from `brushIn`, as opposed to relying on internal state of the chart. That way, charts are always synced properly via the shared external store like so:
+
+```
+                                        ----> ChartA (consumes brushes and renders them)
+                                        |
+ResultStore --exports shared brush data--
+                                        |
+                                        ----> ChartB (consumes brushes and renders them)
+```
+
+Charts may also export brushes to the ResultStore, based on user interactions within the chart. This is done via the `brushOut` signal, which `chart.tsx` will read from if it exists and use it to update the ResultStore.
+
+This is similar to the ["Controlled Component" concept in React](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
+
+For examples of how to use brushIn data and export brushOut data, see the bar chart and line chart spec generation code.
+
+## Debugging tips
+
+TODO
+
+- signal logging
+- vega introspection
+
+## Generating builds
+
+To generate local builds of the renderer, you can run
+
+```
+$ npm run build
+```
+
+This is useful when developing with the Malloy VSCode Extension repo, where you can use `npm run malloy-link` to reference your local build of the renderer.

package/README.md

@@ -1,42 +1,51 @@
-# Malloy
+# Malloy Renderer
 
-Malloy is an experimental language for describing data relationships and transformations. It is both a semantic modeling language and a querying language that runs queries against a relational database. Malloy currently connects to BigQuery and Postgres, and natively supports DuckDB. We've built a Visual Studio Code extension to facilitate building Malloy data models, querying and transforming data, and creating simple visualizations and dashboards.
+The Malloy Renderer is a web component for rendering Malloy query results. It is included by default in the Malloy VSCode extension, but can also be embedded by developers into their own applications that use Malloy query results. To learn more about how to use the renderer in a Malloy model, see [the Renderer docs](https://docs.malloydata.dev/documentation/visualizations/overview).
 
-## This package
+## Using the Renderer in Web Apps
 
-This package provides a simple mechanism to render charts based on results from using the `malloydata/malloy` library. See [here](https://github.com/malloydata/malloy/blob/main/packages/malloy/README.md) for additional information.
+1. Install the renderer package
 
-## Developing locally with Storybook
+```bash
+$ npm i @malloydata/render
+```
 
-Run `npm run storybook` to launch a Storybook app in your browser. This app will hot reload as you make changes to the renderer source.
+2. Import the web component somewhere in your project. This will automatically register the `<malloy-render>` web component on your document.
 
-Stories are written in the `src/stories` directory. To add more data and Malloy files for your stories to consume, you must:
+```javascript
+import '@malloydata/render/webcomponent';
+```
 
-- put .malloy files in `src/stories/static`
-- put data files in `src/stories/static/data`
-- register data files be loaded into the DuckDB WASM connection by adding the file name to `.storybook/registered_data.json`
+3. Use the web component in your app by creating a `<malloy-render>` node and passing it Malloy query results:
 
-[Take a look at the Basic story as an example.](./src/stories/basic.stories.ts)
+```javascript
+const malloyRenderElement = document.createElement('malloy-render');
+// Pass a Malloy Result object to the renderer
+malloyRenderElement.result = myMalloyResult;
 
-### On Reloading Changes
+/*
+Alternatively, you can pass Malloy QueryResult and ModelDef objects to the renderer,
+which will then construct the Result object. This is useful when you are receiving serialiazed Malloy results via an API.
+*/
+malloyRenderElement.queryResult = myQueryResult;
+malloyRenderElement.modelDef = myModelDef;
+```
 
-When running `npm run storybook`, only changes in the malloy-render package will hot reload properly. Changes to dependencies like the core `malloy` package may require a browser reload to work properly.
+### Explicitly registering the web component
 
-## Using the Bundled Renderer
+In some situations, such as using Malloy Render with a mock DOM like JSDOM, you may want to explicitly register the web component on a document. This can be done using the `@malloydata/render/webcomponent/register` import like so:
 
-Any web browser with JSON results from a DB query execution and a PreparedResult object from the Malloy library should be able to use the bundled renderer to create an HTML Malloy Result. The renderer bundle is available from v0.0.118 onwards. Example usage:
+```javascript
+import registerMalloyRender from '@malloydata/malloy-render/webcomponent/register';
 
-```js
-var script = document.createElement('script');
-script.src =
-  'https://cdn.jsdelivr.net/npm/@malloydata/render@0.0.118/dist/bundle/bundled_renderer.min.js';
-document.head.appendChild(script);
-var resultElement = document.getElementById('result_div');
-renderMalloyResults(result, total_rows, preparedResult).then(
-  function (malloyResElement) {
-    resultElement.appendChild(malloyResElement);
-  }
-);
+const {window} = new JSDOM(`...`);
+
+registerMalloyRender({
+  customElements: window.customElements,
+  HTMLElement: window.HTMLElement,
+});
 ```
 
-To build the bundle from source, run `npm run bundle_renderer`. This will create the bundled js files in in `dist/bundle`.
+# Developing
+
+See the [Developing README](./DEVELOPING.md)

package/dist/html/area_sparkline.d.ts

@@ -1,10 +1,10 @@
 import { HTMLSparkLineRenderer } from './sparkline';
 import { DataArray, Explore, Field } from '@malloydata/malloy';
 import * as lite from 'vega-lite';
-import { RendererFactory } from '../renderer_factory';
-import { Renderer } from '../renderer';
-import { SparkLineRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
+import { RendererFactory } from './renderer_factory';
+import { Renderer } from './renderer';
+import { SparkLineRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
 export declare class HTMLAreaSparkLineRenderer extends HTMLSparkLineRenderer {
     getVegaLiteSpec(data: DataArray): lite.TopLevelSpec;
 }

package/dist/html/bar_chart.d.ts

@@ -1,9 +1,9 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLCartesianChartRenderer } from './cartesian_chart';
-import { BarChartRenderOptions, SparkLineRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererFactory } from '../renderer_factory';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
+import { BarChartRenderOptions, SparkLineRenderOptions, StyleDefaults } from './data_styles';
+import { RendererFactory } from './renderer_factory';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
 export declare class HTMLBarChartRenderer extends HTMLCartesianChartRenderer {
     getMark(): 'bar';
     getDataType(field: Field): 'temporal' | 'ordinal' | 'quantitative' | 'nominal';

package/dist/html/bar_sparkline.d.ts

@@ -1,10 +1,10 @@
 import { DataArray, Explore, Field } from '@malloydata/malloy';
 import * as lite from 'vega-lite';
 import { HTMLBarChartRenderer } from './bar_chart';
-import { BarSparkLineRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererFactory } from '../renderer_factory';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
+import { BarSparkLineRenderOptions, StyleDefaults } from './data_styles';
+import { RendererFactory } from './renderer_factory';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
 export declare class HTMLBarSparkLineRenderer extends HTMLBarChartRenderer {
     getSize(): {
         height: number;

package/dist/html/boolean.d.ts

@@ -1,9 +1,9 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLTextRenderer } from './text';
-import { RendererFactory } from '../renderer_factory';
-import { BooleanRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
+import { RendererFactory } from './renderer_factory';
+import { BooleanRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
 export declare class HTMLBooleanRenderer extends HTMLTextRenderer {
     getText(data: DataColumn): string | null;
 }

package/dist/html/bytes.d.ts

@@ -1,9 +1,9 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLTextRenderer } from './text';
-import { BytesRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
+import { BytesRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLBytesRenderer extends HTMLTextRenderer {
     getText(data: DataColumn): string | null;
 }

package/dist/html/chart.d.ts

@@ -1,8 +1,8 @@
 import * as lite from 'vega-lite';
 import { DataArray, DataColumn, Field } from '@malloydata/malloy';
-import { Renderer } from '../renderer';
-import { RendererOptions } from '../renderer_types';
-import { ChartRenderOptions, StyleDefaults } from '../data_styles';
+import { Renderer } from './renderer';
+import { RendererOptions } from './renderer_types';
+import { ChartRenderOptions, StyleDefaults } from './data_styles';
 type MappedRow = {
     [p: string]: string | number | Date | undefined | null;
 };

package/dist/html/column_sparkline.d.ts

@@ -1,10 +1,10 @@
 import { DataArray, Explore, Field } from '@malloydata/malloy';
 import * as lite from 'vega-lite';
 import { HTMLBarChartRenderer } from './bar_chart';
-import { RendererFactory } from '../renderer_factory';
-import { ColumnSparkLineRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
+import { RendererFactory } from './renderer_factory';
+import { ColumnSparkLineRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
 export declare class HTMLColumnSparkLineRenderer extends HTMLBarChartRenderer {
     getSize(): {
         height: number;

package/dist/html/container.d.ts

@@ -1,7 +1,7 @@
 import { Explore, Tag } from '@malloydata/malloy';
-import { StyleDefaults } from '../data_styles';
-import { ChildRenderers, RenderTree } from '../renderer';
-import { RendererOptions } from '../renderer_types';
+import { StyleDefaults } from './data_styles';
+import { ChildRenderers, RenderTree } from './renderer';
+import { RendererOptions } from './renderer_types';
 export declare abstract class ContainerRenderer extends RenderTree {
     childRenderers: ChildRenderers;
     protected abstract childrenStyleDefaults: StyleDefaults;

package/dist/html/currency.d.ts

@@ -1,9 +1,9 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLTextRenderer } from './text';
-import { RendererFactory } from '../renderer_factory';
-import { CurrencyRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
+import { RendererFactory } from './renderer_factory';
+import { CurrencyRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
 export declare class HTMLCurrencyRenderer extends HTMLTextRenderer {
     readonly options: CurrencyRenderOptions;
     constructor(document: Document, options: CurrencyRenderOptions);

package/dist/html/dashboard.d.ts

@@ -1,5 +1,5 @@
 import { DataArrayOrRecord } from '@malloydata/malloy';
-import { StyleDefaults } from '../data_styles';
+import { StyleDefaults } from './data_styles';
 import { ContainerRenderer } from './container';
 export declare class HTMLDashboardRenderer extends ContainerRenderer {
     protected childrenStyleDefaults: StyleDefaults;

package/dist/{data_styles.d.ts → html/data_styles.d.ts}

@@ -1,5 +1,5 @@
 import * as lite from 'vega-lite';
-import { VegaSpec } from './component/types';
+import { VegaSpec } from '../component/types';
 export type DataStyles = {
     [fieldName: string]: RenderDef;
 };

package/dist/html/data_volume.d.ts

@@ -1,9 +1,9 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLTextRenderer } from './text';
-import { DataVolumeRenderOptions, NumberRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
+import { DataVolumeRenderOptions, NumberRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLDataVolumeRenderer extends HTMLTextRenderer {
     readonly options: DataVolumeRenderOptions;
     constructor(document: Document, options: DataVolumeRenderOptions);

package/dist/html/date.d.ts

@@ -1,8 +1,8 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
-import { Renderer } from '../renderer';
-import { StyleDefaults, TimeRenderOptions } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { RendererFactory } from '../renderer_factory';
+import { Renderer } from './renderer';
+import { StyleDefaults, TimeRenderOptions } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLDateRenderer implements Renderer {
     private readonly document;
     private readonly queryTimezone;

package/dist/html/duration.d.ts

@@ -1,9 +1,9 @@
 import { AtomicField, DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLTextRenderer } from './text';
-import { DurationRenderOptions, DurationUnit, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
+import { DurationRenderOptions, DurationUnit, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
 export declare function formatTimeUnit(value: number, unit: DurationUnit, options?: {
     numFormat?: string;
     terse?: boolean;

package/dist/html/html_view.d.ts

@@ -1,7 +1,7 @@
 import { DataArray, Explore, Field, Result, Tag } from '@malloydata/malloy';
-import { StyleDefaults } from '../data_styles';
-import { Renderer } from '../renderer';
-import { RendererOptions } from '../renderer_types';
+import { StyleDefaults } from './data_styles';
+import { Renderer } from './renderer';
+import { RendererOptions } from './renderer_types';
 export declare class HTMLView {
     private document;
     constructor(document: Document);

package/dist/html/image.d.ts

@@ -1,8 +1,8 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
-import { ImageRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
+import { ImageRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
 export declare class HTMLImageRenderer implements Renderer {
     private readonly document;
     constructor(document: Document);

package/dist/html/json.d.ts

@@ -1,8 +1,8 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
-import { Renderer } from '../renderer';
-import { JSONRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { RendererFactory } from '../renderer_factory';
+import { Renderer } from './renderer';
+import { JSONRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLJSONRenderer implements Renderer {
     private readonly document;
     constructor(document: Document);

package/dist/html/line_chart.d.ts

@@ -1,9 +1,9 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLCartesianChartRenderer } from './cartesian_chart';
-import { LineChartRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererFactory } from '../renderer_factory';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
+import { LineChartRenderOptions, StyleDefaults } from './data_styles';
+import { RendererFactory } from './renderer_factory';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
 export declare class HTMLLineChartRenderer extends HTMLCartesianChartRenderer {
     getMark(): 'line';
     getDataType(field: Field): 'temporal' | 'ordinal' | 'quantitative' | 'nominal';

package/dist/html/link.d.ts

@@ -1,8 +1,8 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
-import { Renderer } from '../renderer';
-import { LinkRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { RendererFactory } from '../renderer_factory';
+import { Renderer } from './renderer';
+import { LinkRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLLinkRenderer implements Renderer {
     private readonly document;
     constructor(document: Document);

package/dist/html/list.d.ts

@@ -1,5 +1,5 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
-import { StyleDefaults } from '../data_styles';
+import { StyleDefaults } from './data_styles';
 import { ContainerRenderer } from './container';
 export declare class HTMLListRenderer extends ContainerRenderer {
     protected childrenStyleDefaults: StyleDefaults;

package/dist/html/main_renderer_factory.d.ts

@@ -0,0 +1,35 @@
+import { Field, Explore, Tag } from '@malloydata/malloy';
+import { DataRenderOptions, RenderDef, StyleDefaults } from './data_styles';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
+import { RendererOptions } from './renderer_types';
+import { ShapeMapRendererFactory } from './shape_map';
+import { PointMapRendererFactory } from './point_map';
+import { ImageRendererFactory } from './image';
+import { SegmentMapRendererFactory } from './segment_map';
+import { JSONRendererFactory } from './json';
+import { SparkLineRendererFactory } from './sparkline';
+import { BarSparkLineRendererFactory } from './bar_sparkline';
+import { AreaSparkLineRendererFactory } from './area_sparkline';
+import { ColumnSparkLineRendererFactory } from './column_sparkline';
+import { ScatterChartRendererFactory } from './scatter_chart';
+import { BarChartRendererFactory } from './bar_chart';
+import { VegaRendererFactory } from './vega_spec';
+import { LineChartRendererFactory } from './line_chart';
+import { DateRendererFactory } from './date';
+import { CurrencyRendererFactory } from './currency';
+import { PercentRendererFactory } from './percent';
+import { NumberRendererFactory } from './number';
+import { BytesRendererFactory } from './bytes';
+import { BooleanRendererFactory } from './boolean';
+import { LinkRendererFactory } from './link';
+import { UnsupportedRendererFactory } from './unsupported';
+import { TextRendererFactory } from './text';
+import { DataVolumeRendererFactory } from './data_volume';
+import { DurationRendererFactory } from './duration';
+export declare class MainRendererFactory {
+    static renderFactories: (JSONRendererFactory | TextRendererFactory | NumberRendererFactory | ShapeMapRendererFactory | PointMapRendererFactory | ImageRendererFactory | SegmentMapRendererFactory | VegaRendererFactory | LineChartRendererFactory | SparkLineRendererFactory | BarChartRendererFactory | BarSparkLineRendererFactory | AreaSparkLineRendererFactory | ColumnSparkLineRendererFactory | ScatterChartRendererFactory | DateRendererFactory | CurrencyRendererFactory | PercentRendererFactory | BytesRendererFactory | BooleanRendererFactory | LinkRendererFactory | UnsupportedRendererFactory | DataVolumeRendererFactory | DurationRendererFactory)[];
+    create(renderDef: RenderDef | undefined, tagged: Tag, document: Document, styleDefaults: StyleDefaults, rendererOptions: RendererOptions, field: Field | Explore, timezone?: string | undefined): Renderer | undefined;
+    matchesRenderDef(renderDef: RenderDef | undefined, factory: RendererFactory<DataRenderOptions>): boolean | "" | undefined;
+    matchesTag(tagged: Tag, factory: RendererFactory<DataRenderOptions>): boolean | "" | undefined;
+}

package/dist/html/number.d.ts

@@ -1,9 +1,9 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLTextRenderer } from './text';
-import { NumberRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
+import { NumberRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLNumberRenderer extends HTMLTextRenderer {
     readonly options: NumberRenderOptions;
     constructor(document: Document, options: NumberRenderOptions);

package/dist/html/percent.d.ts

@@ -1,9 +1,9 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLNumberRenderer } from './number';
-import { PercentRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
+import { PercentRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLPercentRenderer extends HTMLNumberRenderer {
     getText(data: DataColumn): string | null;
 }

package/dist/html/point_map.d.ts

@@ -1,10 +1,10 @@
 import * as lite from 'vega-lite';
 import { DataArray, DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLChartRenderer } from './chart';
-import { RendererFactory } from '../renderer_factory';
-import { PointMapRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
+import { RendererFactory } from './renderer_factory';
+import { PointMapRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
 export declare class HTMLPointMapRenderer extends HTMLChartRenderer {
     getDataValue(data: DataColumn): string | number;
     getDataType(field: Field): 'ordinal' | 'quantitative' | 'nominal';

package/dist/html/scatter_chart.d.ts

@@ -1,9 +1,9 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLCartesianChartRenderer } from './cartesian_chart';
-import { LineChartRenderOptions, ScatterChartRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
+import { LineChartRenderOptions, ScatterChartRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLScatterChartRenderer extends HTMLCartesianChartRenderer {
     getMark(): 'point';
     getDataType(field: Field): 'temporal' | 'ordinal' | 'quantitative' | 'nominal';

package/dist/html/segment_map.d.ts

@@ -1,10 +1,10 @@
 import * as lite from 'vega-lite';
 import { DataArray, DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLChartRenderer } from './chart';
-import { RendererFactory } from '../renderer_factory';
-import { SegmentMapRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
+import { RendererFactory } from './renderer_factory';
+import { SegmentMapRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
 export declare class HTMLSegmentMapRenderer extends HTMLChartRenderer {
     getDataValue(data: DataColumn): string | number | null;
     getDataType(field: Field): 'ordinal' | 'quantitative' | 'nominal';

package/dist/html/shape_map.d.ts

@@ -1,10 +1,10 @@
 import * as lite from 'vega-lite';
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLChartRenderer } from './chart';
-import { ShapeMapRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
+import { ShapeMapRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLShapeMapRenderer extends HTMLChartRenderer {
     private getRegionField;
     private getColorField;

package/dist/html/sparkline.d.ts

@@ -1,10 +1,10 @@
 import { DataArray, Explore, Field } from '@malloydata/malloy';
 import * as lite from 'vega-lite';
 import { HTMLLineChartRenderer } from './line_chart';
-import { SparkLineRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
+import { SparkLineRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
 export declare class HTMLSparkLineRenderer extends HTMLLineChartRenderer {
     getSize(): {
         height: number;

package/dist/html/table.d.ts

@@ -1,7 +1,7 @@
 import { DataColumn, DataRecord, Field, SortableField } from '@malloydata/malloy';
-import { StyleDefaults } from '../data_styles';
+import { StyleDefaults } from './data_styles';
 import { ContainerRenderer } from './container';
-import { ChildRenderers, Renderer } from '../renderer';
+import { ChildRenderers, Renderer } from './renderer';
 declare class FlattenedColumnField {
     readonly flattenedField: Field;
     readonly field: Field;

package/dist/html/text.d.ts

@@ -1,8 +1,8 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
-import { Renderer } from '../renderer';
-import { DataRenderOptions, StyleDefaults, TextRenderOptions } from '../data_styles';
-import { RendererFactory } from '../renderer_factory';
-import { RendererOptions } from '../renderer_types';
+import { Renderer } from './renderer';
+import { DataRenderOptions, StyleDefaults, TextRenderOptions } from './data_styles';
+import { RendererFactory } from './renderer_factory';
+import { RendererOptions } from './renderer_types';
 export declare class HTMLTextRenderer implements Renderer {
     private readonly document;
     constructor(document: Document);

package/dist/html/unsupported.d.ts

@@ -1,8 +1,8 @@
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
-import { Renderer } from '../renderer';
-import { RendererFactory } from '../renderer_factory';
-import { DataRenderOptions, StyleDefaults } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
+import { Renderer } from './renderer';
+import { RendererFactory } from './renderer_factory';
+import { DataRenderOptions, StyleDefaults } from './data_styles';
+import { RendererOptions } from './renderer_types';
 export declare class HTMLUnsupportedRenderer implements Renderer {
     private readonly document;
     constructor(document: Document);

package/dist/html/utils.d.ts

@@ -1,6 +1,6 @@
 import { DataColumn, DateTimeframe, Field, Tag, TimestampTimeframe } from '@malloydata/malloy';
-import { RenderDef } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
+import { RenderDef } from './data_styles';
+import { RendererOptions } from './renderer_types';
 export declare function getColorScale(type: 'temporal' | 'ordinal' | 'quantitative' | 'nominal' | undefined, isRectMark: boolean, hasOverlappingText?: boolean): {
     range: string[];
 } | undefined;

package/dist/html/vega_spec.d.ts

@@ -1,10 +1,10 @@
 import * as lite from 'vega-lite';
 import { DataColumn, Explore, Field } from '@malloydata/malloy';
 import { HTMLChartRenderer } from './chart';
-import { StyleDefaults, VegaRenderOptions } from '../data_styles';
-import { RendererOptions } from '../renderer_types';
-import { RendererFactory } from '../renderer_factory';
-import { Renderer } from '../renderer';
+import { StyleDefaults, VegaRenderOptions } from './data_styles';
+import { RendererOptions } from './renderer_types';
+import { RendererFactory } from './renderer_factory';
+import { Renderer } from './renderer';
 type DataContainer = Array<unknown> | Record<string, unknown>;
 export declare const DEFAULT_SPEC: Partial<lite.TopLevelSpec>;
 export declare const vegaSpecs: Record<string, lite.TopLevelSpec>;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { HTMLView, JSONView } from './html/html_view';
-export * from './data_styles';
+export * from './html/data_styles';
 export type { MalloyRenderProps } from './component/render';
-export { getDrillQuery } from './drill';
+export { getDrillQuery } from './html/drill';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.210-dev241105194407",
+  "version": "0.0.210-dev241107210431",
   "license": "MIT",
   "main": "dist/module/index.umd.js",
   "types": "dist/index.d.ts",
@@ -14,10 +14,8 @@
   },
   "exports": {
     ".": "./dist/module/index.umd.js",
-    "./style": "./dist/module/style.css",
     "./webcomponent": "./dist/webcomponent/malloy-render.umd.js",
-    "./webcomponent/register": "./dist/register/register.umd.js",
-    "./webcomponent/style": "./dist/webcomponent/style.css"
+    "./webcomponent/register": "./dist/register/register.umd.js"
   },
   "scripts": {
     "bundle_renderer": "node src/bundle/esbuild_bundler.js",
@@ -32,7 +30,7 @@
     "build-types": "tsc --build --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@malloydata/malloy": "^0.0.210-dev241105194407",
+    "@malloydata/malloy": "^0.0.210-dev241107210431",
     "@tanstack/solid-virtual": "^3.10.4",
     "component-register": "^0.8.6",
     "lodash": "^4.17.20",

package/dist/main_renderer_factory.d.ts

@@ -1,35 +0,0 @@
-import { Field, Explore, Tag } from '@malloydata/malloy';
-import { DataRenderOptions, RenderDef, StyleDefaults } from './data_styles';
-import { Renderer } from './renderer';
-import { RendererFactory } from './renderer_factory';
-import { RendererOptions } from './renderer_types';
-import { ShapeMapRendererFactory } from './html/shape_map';
-import { PointMapRendererFactory } from './html/point_map';
-import { ImageRendererFactory } from './html/image';
-import { SegmentMapRendererFactory } from './html/segment_map';
-import { JSONRendererFactory } from './html/json';
-import { SparkLineRendererFactory } from './html/sparkline';
-import { BarSparkLineRendererFactory } from './html/bar_sparkline';
-import { AreaSparkLineRendererFactory } from './html/area_sparkline';
-import { ColumnSparkLineRendererFactory } from './html/column_sparkline';
-import { ScatterChartRendererFactory } from './html/scatter_chart';
-import { BarChartRendererFactory } from './html/bar_chart';
-import { VegaRendererFactory } from './html/vega_spec';
-import { LineChartRendererFactory } from './html/line_chart';
-import { DateRendererFactory } from './html/date';
-import { CurrencyRendererFactory } from './html/currency';
-import { PercentRendererFactory } from './html/percent';
-import { NumberRendererFactory } from './html/number';
-import { BytesRendererFactory } from './html/bytes';
-import { BooleanRendererFactory } from './html/boolean';
-import { LinkRendererFactory } from './html/link';
-import { UnsupportedRendererFactory } from './html/unsupported';
-import { TextRendererFactory } from './html/text';
-import { DataVolumeRendererFactory } from './html/data_volume';
-import { DurationRendererFactory } from './html/duration';
-export declare class MainRendererFactory {
-    static renderFactories: (JSONRendererFactory | TextRendererFactory | NumberRendererFactory | ShapeMapRendererFactory | PointMapRendererFactory | ImageRendererFactory | SegmentMapRendererFactory | VegaRendererFactory | LineChartRendererFactory | SparkLineRendererFactory | BarChartRendererFactory | BarSparkLineRendererFactory | AreaSparkLineRendererFactory | ColumnSparkLineRendererFactory | ScatterChartRendererFactory | DateRendererFactory | CurrencyRendererFactory | PercentRendererFactory | BytesRendererFactory | BooleanRendererFactory | LinkRendererFactory | UnsupportedRendererFactory | DataVolumeRendererFactory | DurationRendererFactory)[];
-    create(renderDef: RenderDef | undefined, tagged: Tag, document: Document, styleDefaults: StyleDefaults, rendererOptions: RendererOptions, field: Field | Explore, timezone?: string | undefined): Renderer | undefined;
-    matchesRenderDef(renderDef: RenderDef | undefined, factory: RendererFactory<DataRenderOptions>): boolean | "" | undefined;
-    matchesTag(tagged: Tag, factory: RendererFactory<DataRenderOptions>): boolean | "" | undefined;
-}