@malloydata/render 0.0.351 → 0.0.353

package/.storybook/malloy-stories-indexer.ts

@@ -144,6 +144,9 @@ export function viteMalloyStoriesPlugin(): PluginOption {
           import {MalloyRenderer} from '../api/malloy-renderer';
           import {DummyPluginFactory} from '@/plugins/dummy-plugin';
           import {DummyDOMPluginFactory} from '@/plugins/dummy-dom-plugin';
+          import {addons} from '@storybook/preview-api';
+
+          const RENDERER_LOGS_EVENT = 'malloy/renderer-logs/logs';
 
           const meta = {
             title: "Malloy Next/${modelStoriesMeta.componentName}",
@@ -190,6 +193,12 @@ export function viteMalloyStoriesPlugin(): PluginOption {
               console.groupEnd();
               viz.render(targetElement);
 
+              viz.onReady(() => {
+                const logs = viz.getLogs();
+                const channel = addons.getChannel();
+                channel.emit(RENDERER_LOGS_EVENT, logs);
+              });
+
               return parent;
             },
             loaders: [createLoader(script)],

package/.storybook/manager.ts

@@ -1,15 +1,25 @@
-import {addons} from '@storybook/manager-api';
+import React from 'react';
+import {addons, types} from '@storybook/manager-api';
 import theme from './theme';
+import {RendererLogsPanel, ADDON_ID, PANEL_ID} from './renderer-logs-panel';
+
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Renderer Logs',
+    render: ({active}) => React.createElement(RendererLogsPanel, {active}),
+  });
+});
 
 addons.setConfig({
   theme,
   isFullscreen: false,
   showNav: true,
-  showPanel: false,
+  showPanel: true,
   panelPosition: 'bottom',
   enableShortcuts: true,
   showToolbar: false,
-  selectedPanel: undefined,
+  selectedPanel: PANEL_ID,
   initialActive: 'sidebar',
   sidebar: {},
   toolbar: {},

package/.storybook/renderer-logs-panel.ts

@@ -0,0 +1,67 @@
+import React, {useState} from 'react';
+import {useChannel} from '@storybook/manager-api';
+import {AddonPanel} from '@storybook/components';
+
+export const ADDON_ID = 'malloy/renderer-logs';
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const EVENT_ID = `${ADDON_ID}/logs`;
+
+interface LogMessage {
+  severity: string;
+  message: string;
+}
+
+const h = React.createElement;
+
+function LogsContent() {
+  const [logs, setLogs] = useState<LogMessage[]>([]);
+
+  useChannel({
+    [EVENT_ID]: (newLogs: LogMessage[]) => {
+      setLogs(newLogs);
+    },
+  });
+
+  if (logs.length === 0) {
+    return h(
+      'div',
+      {
+        style: {
+          padding: '12px',
+          color: '#888',
+          fontFamily: 'monospace',
+          fontSize: '12px',
+        },
+      },
+      'No renderer logs.'
+    );
+  }
+
+  return h(
+    'div',
+    {style: {padding: '8px', fontFamily: 'monospace', fontSize: '12px'}},
+    logs.map((log, i) =>
+      h(
+        'div',
+        {
+          key: i,
+          style: {
+            padding: '4px 8px',
+            color: log.severity === 'error' ? '#c62828' : '#f57f17',
+            borderBottom: '1px solid #eee',
+          },
+        },
+        h(
+          'span',
+          {style: {marginRight: '6px'}},
+          log.severity === 'error' ? '\u274c' : '\u26a0\ufe0f'
+        ),
+        log.message
+      )
+    )
+  );
+}
+
+export function RendererLogsPanel(props: {active?: boolean}) {
+  return h(AddonPanel, {active: props.active ?? false}, h(LogsContent));
+}

package/dist/module/api/malloy-viz.d.ts

@@ -9,6 +9,9 @@ export declare class MalloyViz {
     private result;
     private metadata;
     private pluginRegistry;
+    private logCollector;
+    private readyCallbacks;
+    private isReady;
     constructor(options: MalloyRendererOptions, pluginRegistry?: RenderPluginFactory[]);
     static addStylesheet(styles: string): void;
     getHTML(): Promise<string>;
@@ -19,4 +22,24 @@ export declare class MalloyViz {
     updateOptions(newOptions: Partial<MalloyRendererOptions>): void;
     getMetadata(): RenderFieldMetadata | null;
     getActivePlugin(fieldKey: string): RenderPluginInstance | null;
+    /**
+     * Register a callback to be called when the render is complete.
+     * If the render is already complete, the callback is called immediately.
+     * Unread tag warnings are collected once the render is ready,
+     * so `getLogs()` should be called from the onReady callback
+     * to include unread tag warnings.
+     */
+    onReady(callback: () => void): void;
+    /**
+     * Get log messages from the most recent render pass.
+     * Includes warnings for unread (unknown) tags and semantic errors.
+     * For complete results including unread tag warnings,
+     * call this from an `onReady` callback.
+     */
+    getLogs(): Malloy.LogMessage[];
+    private handleReady;
+    /**
+     * Walk all field tags and collect warnings for unread properties.
+     */
+    private collectUnreadTagWarnings;
 }

package/dist/module/api/plugin-types.d.ts

@@ -16,6 +16,14 @@ interface BaseRenderPluginInstance<TMetadata = unknown> {
     processData?(field: NestField, cell: NestCell): void;
     beforeRender?(metadata: RenderMetadata, options: GetResultMetadataOptions): void;
     getStyleOverrides?(): Record<string, string>;
+    /**
+     * Declare tag paths this plugin reads during render or interaction.
+     * Each entry is a path of tag property names, e.g. ['viz', 'title'].
+     * The framework marks these as read at registration time so they
+     * don't produce false-positive "unknown tag" warnings when the
+     * component hasn't rendered yet (e.g. virtualized off-screen).
+     */
+    getDeclaredTagPaths?(): string[][];
 }
 export interface SolidJSRenderPluginInstance<TMetadata = unknown> extends BaseRenderPluginInstance<TMetadata> {
     readonly renderMode: 'solidjs';

package/dist/module/component/render-log-collector.d.ts

@@ -0,0 +1,20 @@
+import { Tag } from '@malloydata/malloy-tag';
+import type * as Malloy from '@malloydata/malloy-interfaces';
+/**
+ * Collects LogMessages during rendering.
+ * Semantic validation logs are added during setResult().
+ * Unread tag warnings are added when onReady fires after render completes.
+ */
+export declare class RenderLogCollector {
+    private logs;
+    reset(): void;
+    warn(message: string, tag?: Tag): void;
+    error(message: string, tag?: Tag): void;
+    private add;
+    /**
+     * Walk a tag tree and generate warnings for any unread properties.
+     * Call this after rendering is complete.
+     */
+    collectUnreadTags(tag: Tag, fieldName: string): void;
+    getLogs(): Malloy.LogMessage[];
+}

package/dist/module/component/render.d.ts

@@ -16,6 +16,7 @@ export type MalloyRenderProps = {
     dashboardConfig?: Partial<DashboardConfig>;
     renderFieldMetadata: RenderFieldMetadata;
     useVegaInterpreter?: boolean;
+    onReady?: () => void;
 };
 export declare const useConfig: () => {
     tableConfig: Accessor<TableConfig>;
@@ -30,6 +31,7 @@ export declare function MalloyRenderInner(props: {
     result: Malloy.Result;
     element: HTMLElement;
     scrollEl?: HTMLElement;
+    onReady?: () => void;
     vegaConfigOverride?: VegaConfigHandler;
     renderFieldMetadata: RenderFieldMetadata;
     useVegaInterpreter?: boolean;