Viewer improvements

packages/components/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
 
 const config: StorybookConfig = {
   stories: [
@@ -37,6 +38,15 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+  async viteFinal(config) {
+    // Merge custom configuration into the default config
+    return mergeConfig(config, {
+      // https://github.com/storybookjs/storybook/issues/22223
+      build: {
+        target: "esnext",
+      },
+    });
+  },
 };
 
 export default config;

packages/components/src/components/CodeEditor/useSubmitExtension.ts

@@ -4,7 +4,7 @@ import { useReactiveExtension } from "./codemirrorHooks.js";
 
 export function useSubmitExtension(
   view: EditorView | undefined,
-  onSubmit: (() => void) | undefined
+  onSubmit?: () => void
 ) {
   return useReactiveExtension(
     view,

packages/components/src/components/SquiggleChart.tsx

@@ -3,18 +3,22 @@ import { FC, memo } from "react";
 import { SqValuePath } from "@quri/squiggle-lang";
 import { RefreshIcon } from "@quri/ui";
 
+import { SquiggleViewer } from "../index.js";
 import { useRunnerState } from "../lib/hooks/useRunnerState.js";
 import {
   ProjectExecutionProps,
   StandaloneExecutionProps,
   useSquiggle,
 } from "../lib/hooks/useSquiggle.js";
-import { DynamicSquiggleViewer } from "./DynamicSquiggleViewer.js";
+import { getResultValue, getResultVariables } from "../lib/utility.js";
+import { MessageAlert } from "./Alert.js";
 import { PartialPlaygroundSettings } from "./PlaygroundSettings.js";
+import { SquiggleErrorAlert } from "./SquiggleErrorAlert.js";
+import { SquiggleOutputViewer } from "./SquiggleOutputViewer/index.js";
+import { useGetSubvalueByPath } from "./SquiggleViewer/utils.js";
 
 export type SquiggleChartProps = {
   code: string;
-  showHeader?: boolean;
   rootPathOverride?: SqValuePath; // Note: This should be static. We don't support rootPathOverride to change once set.
 } & (StandaloneExecutionProps | ProjectExecutionProps) &
   // `environment` is passed through StandaloneExecutionProps; this way we guarantee that it's not compatible with `project` prop
@@ -23,7 +27,6 @@ export type SquiggleChartProps = {
 export const SquiggleChart: FC<SquiggleChartProps> = memo(
   function SquiggleChart({
     code,
-    showHeader = false,
     project,
     continues,
     environment,
@@ -41,19 +44,40 @@ export const SquiggleChart: FC<SquiggleChartProps> = memo(
       ...(project ? { project, continues } : { environment }),
     });
 
+    // TODO - if `<ViewerProvider>` is not set up (which is very possible) then calculator paths won't be resolved.
+    const getSubvalueByPath = useGetSubvalueByPath();
+
     if (!squiggleOutput) {
       return <RefreshIcon className="animate-spin" />;
     }
 
-    return (
-      <DynamicSquiggleViewer
-        rootPathOverride={rootPathOverride}
-        squiggleOutput={squiggleOutput}
-        isRunning={isRunning}
-        showHeader={showHeader}
-        environment={environment}
-        {...settings}
-      />
-    );
+    if (rootPathOverride) {
+      const rootValue =
+        rootPathOverride.root === "result"
+          ? getResultValue(squiggleOutput)
+          : getResultVariables(squiggleOutput);
+      if (!rootValue) {
+        return <MessageAlert heading="Value is not defined" />;
+      }
+      if (!rootValue.ok) {
+        return <SquiggleErrorAlert error={rootValue.value} />;
+      }
+
+      const value = getSubvalueByPath(rootValue.value, rootPathOverride);
+      if (!value) {
+        return <MessageAlert heading="Value is not defined" />;
+      }
+
+      return <SquiggleViewer value={value} />;
+    } else {
+      return (
+        <SquiggleOutputViewer
+          squiggleOutput={squiggleOutput}
+          isRunning={isRunning}
+          environment={environment}
+          {...settings}
+        />
+      );
+    }
   }
 );

packages/components/src/components/SquiggleEditor.tsx

@@ -5,8 +5,8 @@ import { useRunnerState } from "../lib/hooks/useRunnerState.js";
 import { useSquiggle } from "../lib/hooks/useSquiggle.js";
 import { getErrors } from "../lib/utility.js";
 import { CodeEditor, CodeEditorHandle } from "./CodeEditor/index.js";
-import { DynamicSquiggleViewer } from "./DynamicSquiggleViewer.js";
 import { PartialPlaygroundSettings } from "./PlaygroundSettings.js";
+import { SquiggleOutputViewer } from "./SquiggleOutputViewer/index.js";
 import { SquiggleCodeProps } from "./types.js";
 
 export type SquiggleEditorProps = SquiggleCodeProps & {
@@ -62,7 +62,7 @@ export const SquiggleEditor: FC<SquiggleEditorProps> = ({
         />
       </div>
       {hideViewer || !squiggleOutput?.code ? null : (
-        <DynamicSquiggleViewer
+        <SquiggleOutputViewer
           squiggleOutput={squiggleOutput}
           isRunning={isRunning}
           editor={editorRef.current ?? undefined}

packages/components/src/components/SquiggleErrorAlert.tsx

@@ -1,3 +1,4 @@
+import { clsx } from "clsx";
 import { FC, PropsWithChildren } from "react";
 
 import {
@@ -25,8 +26,8 @@ const LocationLine: FC<{
 
   return (
     <span
-      className="cursor-pointer hover:underline text-blue-500"
-      onClick={findInEditor}
+      className={clsx(editor && "cursor-pointer hover:underline text-blue-500")}
+      onClick={editor ? findInEditor : undefined}
     >
       line {location.start.line}, column {location.start.column}
     </span>

packages/components/src/components/SquiggleOutputViewer/Layout.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+
+export const Layout: FC<{
+  viewer: ReactNode;
+  menu: ReactNode;
+  indicator: ReactNode;
+}> = ({ viewer, menu, indicator }) => {
+  return (
+    // `flex flex-col` helps to fit this in playground right panel and doesn't hurt otherwise
+    <div className="flex flex-col overflow-y-auto">
+      <div className="flex justify-between items-center px-2 h-8 mb-1">
+        {menu}
+        {indicator}
+      </div>
+      <div
+        className="flex-1 overflow-auto px-2 pb-1"
+        data-testid="dynamic-viewer-result"
+      >
+        {viewer}
+      </div>
+    </div>
+  );
+};

packages/components/src/components/SquiggleOutputViewer/RenderingIndicator.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+
+import { SquiggleOutput } from "../../lib/hooks/useSquiggle.js";
+
+export const RenderingIndicator: FC<{
+  output: SquiggleOutput;
+  isRunning: boolean;
+}> = ({ output, isRunning }) => {
+  const showTime = (executionTime: number) =>
+    executionTime > 1000
+      ? `${(executionTime / 1000).toFixed(2)}s`
+      : `${executionTime}ms`;
+
+  return (
+    <div className="text-zinc-400 text-sm whitespace-nowrap">
+      {isRunning
+        ? "rendering..."
+        : `render #${output.executionId} in ${showTime(output.executionTime)}`}
+    </div>
+  );
+};