@malloydata/render 0.0.96-dev231024223919 → 0.0.96-dev231025173405

package/.storybook/main.ts

@@ -1,5 +1,5 @@
 import {join, dirname} from 'path';
-import {mergeConfig} from 'vite';
+import {mergeConfig, InlineConfig} from 'vite';
 import {StorybookConfig} from '@storybook/html-vite';
 
 /**
@@ -32,14 +32,22 @@ const config: StorybookConfig = {
     if (configType === 'PRODUCTION') {
       // Your production configuration goes here.
     }
-    const finalConfig = mergeConfig(config, {
+    const configOverride: InlineConfig = {
       resolve: {
         preserveSymlinks: true,
+        alias: {
+          '@malloydata/malloy': join(__dirname, '../../malloy/src'),
+          '@malloydata/db-duckdb/wasm': join(
+            __dirname,
+            '../../malloy-db-duckdb/src/duckdb_wasm_connection_browser'
+          ),
+        },
       },
       define: {
         'process.env': {},
       },
-    });
+    };
+    const finalConfig = mergeConfig(config, configOverride);
     return finalConfig;
   },
 };

package/.storybook/registered_data.json

@@ -1 +1 @@
-["products.parquet"]
+["products.parquet", "logos.csv"]

package/README.md

@@ -17,3 +17,7 @@ Stories are written in the `src/stories` directory. To add more data and Malloy
 - register data files be loaded into the DuckDB WASM connection by adding the file name to `.storybook/registered_data.json`
 
 [Take a look at the Basic story as an example.](./src/stories/basic.stories.ts)
+
+### On Reloading Changes
+
+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.

package/dist/html/image.js

@@ -30,27 +30,35 @@ class HTMLImageRenderer {
         this.document = document;
     }
     async render(data) {
+        var _a;
         if (!data.isString()) {
             return (0, utils_1.createErrorElement)(this.document, 'Invalid field for Image renderer');
         }
+        const { tag } = data.field.tagParse();
+        const imgTag = tag.tag('image');
+        if (!imgTag) {
+            return (0, utils_1.createErrorElement)(this.document, 'Missing tag for Image renderer');
+        }
         const element = data.isNull()
             ? (0, utils_1.createNullElement)(this.document)
             : this.document.createElement('img');
-        const { tag } = data.field.tagParse();
-        const width = tag.text('image', 'width');
-        const height = tag.text('image', 'height');
+        const width = imgTag.text('width');
+        const height = imgTag.text('height');
         // Both image and null placeholder get matching size
         if (width)
             element.style.width = width;
         if (height)
             element.style.height = height;
+        const img = element;
+        const altTag = imgTag.tag('alt');
+        if (altTag) {
+            const alt = (_a = (0, utils_1.getDynamicValue)({ tag: altTag, data })) !== null && _a !== void 0 ? _a : altTag.text();
+            if (alt)
+                img.alt = alt;
+        }
         // Image specific props
         if (!data.isNull()) {
-            const alt = tag.text('image', 'alt');
-            const img = element;
             img.src = data.value;
-            if (alt)
-                img.alt = alt;
         }
         return element;
     }

package/dist/html/utils.d.ts

@@ -1,4 +1,4 @@
-import { DateTimeframe, Field, TimestampTimeframe } from '@malloydata/malloy';
+import { DataColumn, DateTimeframe, Field, Tag, TimestampTimeframe } from '@malloydata/malloy';
 import { RenderDef } from '../data_styles';
 import { RendererOptions } from '../renderer_types';
 export declare function getColorScale(type: 'temporal' | 'ordinal' | 'quantitative' | 'nominal' | undefined, isRectMark: boolean, hasOverlappingText?: boolean): {
@@ -11,3 +11,8 @@ export declare function createErrorElement(document: Document, error: string | E
 export declare function createNullElement(document: Document): HTMLElement;
 export declare function createDrillIcon(document: Document): HTMLElement;
 export declare function formatTitle(options: RendererOptions, field: Field, renderDef?: RenderDef | undefined, timezone?: string): string;
+export declare function getParentRecord(data: DataColumn, n?: number): DataColumn;
+export declare function getDynamicValue<T = unknown>({ tag, data, }: {
+    tag: Tag;
+    data: DataColumn;
+}): T | undefined;

package/dist/html/utils.js

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatTitle = exports.createDrillIcon = exports.createNullElement = exports.createErrorElement = exports.yieldTask = exports.normalizeToTimezone = exports.timeToString = exports.getColorScale = void 0;
+exports.getDynamicValue = exports.getParentRecord = exports.formatTitle = exports.createDrillIcon = exports.createNullElement = exports.createErrorElement = exports.yieldTask = exports.normalizeToTimezone = exports.timeToString = exports.getColorScale = void 0;
 const malloy_1 = require("@malloydata/malloy");
 const startCase_1 = __importDefault(require("lodash/startCase"));
 const luxon_1 = require("luxon");
@@ -227,4 +227,27 @@ function formatTitle(options, field, renderDef, timezone) {
     return title;
 }
 exports.formatTitle = formatTitle;
+function getParentRecord(data, n = 0) {
+    let record = data;
+    while (n > 0 && record.parentRecord) {
+        n -= 1;
+        record = record.parentRecord;
+    }
+    return record;
+}
+exports.getParentRecord = getParentRecord;
+function getDynamicValue({ tag, data, }) {
+    var _a, _b, _c;
+    const match = (_b = (_a = tag
+        .tag('field')) === null || _a === void 0 ? void 0 : _a.text()) === null || _b === void 0 ? void 0 : _b.match(/^(\^*)(.*)/);
+    if (!match)
+        return undefined;
+    const [, parentScoping, fieldName] = match;
+    const ancestorCt = parentScoping.length;
+    const scope = getParentRecord(data, ancestorCt);
+    if ('cell' in scope)
+        return (_c = scope.cell(fieldName)) === null || _c === void 0 ? void 0 : _c.value;
+    return undefined;
+}
+exports.getDynamicValue = getDynamicValue;
 //# sourceMappingURL=utils.js.map

package/dist/stories/image.stories.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    title: string;
+    render: ({ source, view }: {
+        source: any;
+        view: any;
+    }, { globals: { connection } }: {
+        globals: {
+            connection: any;
+        };
+    }) => HTMLDivElement;
+    argTypes: {};
+};
+export default _default;
+export declare const ImageAltFromRecord: {
+    args: {
+        source: string;
+        view: string;
+    };
+};
+export declare const ImageAltFromParent: {
+    args: {
+        source: string;
+        view: string;
+    };
+};
+export declare const ImageAltFromGrandparent: {
+    args: {
+        source: string;
+        view: string;
+    };
+};

package/dist/stories/image.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageAltFromGrandparent = exports.ImageAltFromParent = exports.ImageAltFromRecord = void 0;
+const image_malloy_raw_1 = __importDefault(require("./static/image.malloy?raw"));
+const render_malloy_1 = require("./render-malloy");
+exports.default = {
+    title: 'Malloy/Image',
+    render: ({ source, view }, { globals: { connection } }) => {
+        return (0, render_malloy_1.renderMalloy)({ script: image_malloy_raw_1.default, source, view, connection });
+    },
+    argTypes: {},
+};
+exports.ImageAltFromRecord = {
+    args: {
+        source: 'logos',
+        view: 'img_from_record',
+    },
+};
+exports.ImageAltFromParent = {
+    args: {
+        source: 'logos',
+        view: 'img_from_parent',
+    },
+};
+exports.ImageAltFromGrandparent = {
+    args: {
+        source: 'logos',
+        view: 'img_from_grandparent',
+    },
+};
+//# sourceMappingURL=image.stories.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malloydata/render",
-  "version": "0.0.96-dev231024223919",
+  "version": "0.0.96-dev231025173405",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@malloydata/malloy": "^0.0.96-dev231024223919",
+    "@malloydata/malloy": "^0.0.96-dev231025173405",
     "@types/luxon": "^2.4.0",
     "lodash": "^4.17.20",
     "luxon": "^2.4.0",