Merge branch 'main' into improved-tooltips

packages/components/src/components/SquiggleOutputViewer/index.tsx

@@ -23,8 +23,10 @@ import { CodeEditorHandle } from "../CodeEditor/index.js";
 import { ErrorBoundary } from "../ErrorBoundary.js";
 import { PartialPlaygroundSettings } from "../PlaygroundSettings.js";
 import { SquiggleErrorAlert } from "../SquiggleErrorAlert.js";
-import { SquiggleViewerHandle } from "../SquiggleViewer/index.js";
-import { ViewerProvider } from "../SquiggleViewer/ViewerProvider.js";
+import {
+  SquiggleViewerHandle,
+  ViewerProvider,
+} from "../SquiggleViewer/ViewerProvider.js";
 import { Layout } from "./Layout.js";
 import { RenderingIndicator } from "./RenderingIndicator.js";
 
@@ -110,7 +112,11 @@ export const SquiggleOutputViewer = forwardRef<SquiggleViewerHandle, Props>(
     }
 
     return (
-      <ViewerProvider partialPlaygroundSettings={settings} editor={editor}>
+      <ViewerProvider
+        partialPlaygroundSettings={settings}
+        editor={editor}
+        ref={viewerRef}
+      >
         <Layout
           menu={
             <Dropdown

packages/components/src/components/SquigglePlayground/index.tsx

@@ -17,7 +17,7 @@ import {
   type PlaygroundSettings,
 } from "../PlaygroundSettings.js";
 import { SquiggleOutputViewer } from "../SquiggleOutputViewer/index.js";
-import { SquiggleViewerHandle } from "../SquiggleViewer/index.js";
+import { SquiggleViewerHandle } from "../SquiggleViewer/ViewerProvider.js";
 import {
   LeftPlaygroundPanel,
   LeftPlaygroundPanelHandle,

packages/components/src/components/SquiggleViewer/ViewerProvider.tsx

@@ -23,7 +23,6 @@ import {
   PartialPlaygroundSettings,
   PlaygroundSettings,
 } from "../PlaygroundSettings.js";
-import { SquiggleViewerHandle } from "./index.js";
 import {
   getChildrenValues,
   pathAsString,
@@ -32,6 +31,10 @@ import {
 
 type ViewerType = "normal" | "tooltip";
 
+export type SquiggleViewerHandle = {
+  viewValuePath(path: SqValuePath): void;
+};
+
 type ItemHandle = {
   element: HTMLDivElement;
   forceUpdate: () => void;
@@ -166,6 +169,7 @@ type ViewerContextShape = {
   itemStore: ItemStore;
   viewerType: ViewerType;
   initialized: boolean;
+  handle: SquiggleViewerHandle;
 };
 
 export const ViewerContext = createContext<ViewerContextShape>({
@@ -175,6 +179,9 @@ export const ViewerContext = createContext<ViewerContextShape>({
   editor: undefined,
   itemStore: new ItemStore(),
   viewerType: "normal",
+  handle: {
+    viewValuePath: () => {},
+  },
   initialized: false,
 });
 
@@ -332,11 +339,13 @@ export const InnerViewerProvider = forwardRef<SquiggleViewerHandle, Props>(
       unstablePlaygroundSettings
     );
 
-    useImperativeHandle(ref, () => ({
+    const handle: SquiggleViewerHandle = {
       viewValuePath(path: SqValuePath) {
         itemStore.scrollToPath(path);
       },
-    }));
+    };
+
+    useImperativeHandle(ref, () => handle);
 
     const [focused, setFocused] = useState<SqValuePath | undefined>();
 
@@ -353,6 +362,7 @@ export const InnerViewerProvider = forwardRef<SquiggleViewerHandle, Props>(
           setFocused,
           itemStore,
           viewerType,
+          handle,
           initialized: true,
         }}
       >
@@ -363,15 +373,24 @@ export const InnerViewerProvider = forwardRef<SquiggleViewerHandle, Props>(
 );
 InnerViewerProvider.displayName = "InnerViewerProvider";
 
+const ProxyViewerProvider = forwardRef<SquiggleViewerHandle, Props>(
+  (props, ref) => {
+    const { handle } = useViewerContext();
+    useImperativeHandle(ref, () => handle);
+    return props.children; // TODO - props.settings will be ignored, what should we do?
+  }
+);
+ProxyViewerProvider.displayName = "ProxyViewerProvider";
+
 export const ViewerProvider = forwardRef<SquiggleViewerHandle, Props>(
   (props, ref) => {
     // `ViewerProvider` is a singleton, so if the context already exists, we don't initialize it again
     const { initialized } = useContext(ViewerContext);
     if (initialized) {
-      return props.children; // TODO: `ref` and settings will be ignored
+      return <ProxyViewerProvider ref={ref} {...props} />;
+    } else {
+      return <InnerViewerProvider ref={ref} {...props} />;
     }
-
-    return <InnerViewerProvider ref={ref} {...props} />;
   }
 );
 ViewerProvider.displayName = "ViewerProvider";

packages/components/src/components/SquiggleViewer/index.tsx

@@ -9,6 +9,7 @@ import { PartialPlaygroundSettings } from "../PlaygroundSettings.js";
 import { pathIsEqual, pathItemFormat, useGetSubvalueByPath } from "./utils.js";
 import { ValueViewer } from "./ValueViewer.js";
 import {
+  SquiggleViewerHandle,
   useFocus,
   useUnfocus,
   useViewerContext,
@@ -68,10 +69,6 @@ const FocusedNavigation: FC<{
   );
 };
 
-export type SquiggleViewerHandle = {
-  viewValuePath(path: SqValuePath): void;
-};
-
 export type SquiggleViewerProps = {
   value: SqValue;
   editor?: CodeEditorHandle;

packages/components/src/widgets/DistWidget/DistributionsChart.tsx

@@ -159,10 +159,7 @@ const InnerDistributionsChart: FC<{
     ]);
 
     const yScale = sqScaleToD3(plot.yScale);
-    yScale.domain([
-      Math.max(Math.min(...domain.map((p) => p.y)), 0), // min value, but at least 0
-      Math.max(...domain.map((p) => p.y)),
-    ]);
+    yScale.domain([0, Math.max(...domain.map((p) => p.y))]);
 
     return { xScale, yScale };
   }, [domain, plot.xScale, plot.yScale]);