Off-by-one fixes & other small changes: website playground, dist charts

.changeset/proud-lamps-hope.md

@@ -0,0 +1,5 @@
+---
+"@quri/squiggle-components": patch
+---
+
+Fix dist chart legend positioning and how it affects the chart height

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

@@ -127,13 +127,21 @@ const InnerDistributionsChart: FC<{
   );
 
   const legendItemHeight = 16;
+  const legendOffset = 2;
 
-  const legendHeight = isMulti ? legendItemHeight * shapes.length : 0;
+  const legendHeight = isMulti
+    ? legendItemHeight * shapes.length + legendOffset
+    : 0;
   const samplesFooterHeight = samplesBarSetting === "bottom" ? 20 : 0;
 
-  const height = innerHeight + legendHeight + samplesFooterHeight;
   const bottomPadding = (!showXAxis ? 0 : 14) + samplesFooterHeight;
 
+  // full height of canvas
+  const height = Math.max(
+    innerHeight + samplesFooterHeight,
+    legendHeight + bottomPadding
+  );
+
   const discreteRadius = distRadiusScalingFromHeight(height);
 
   const sampleBarHeight =
@@ -183,7 +191,7 @@ const InnerDistributionsChart: FC<{
         context,
         width,
         height,
-        suggestedPadding: suggestedPadding,
+        suggestedPadding,
         xScale,
         yScale,
         showYAxis: false,
@@ -193,28 +201,6 @@ const InnerDistributionsChart: FC<{
         showAxisLines: false,
       });
 
-      if (isMulti) {
-        const radius = 5;
-        for (let i = 0; i < shapes.length; i++) {
-          context.save();
-          context.translate(padding.left, legendItemHeight * i);
-          context.fillStyle = getColor(i);
-          drawCircle({
-            context,
-            x: radius,
-            y: radius,
-            r: radius,
-          });
-
-          context.textAlign = "left";
-          context.textBaseline = "middle";
-          context.fillStyle = "black";
-          context.font = "12px sans-serif";
-          context.fillText(shapes[i].name, 16, radius);
-          context.restore();
-        }
-      }
-
       // samplesBar
       function samplesBarShowSettings(): { yOffset: number; color: string } {
         if (samplesBarSetting === "behind") {
@@ -356,6 +342,28 @@ const InnerDistributionsChart: FC<{
         frame.exit();
       }
 
+      if (isMulti) {
+        const radius = 5;
+        for (let i = 0; i < shapes.length; i++) {
+          context.save();
+          context.translate(padding.left, legendItemHeight * i + legendOffset);
+          context.fillStyle = getColor(i);
+          drawCircle({
+            context,
+            x: radius,
+            y: radius,
+            r: radius,
+          });
+
+          context.textAlign = "left";
+          context.textBaseline = "middle";
+          context.fillStyle = "black";
+          context.font = "12px sans-serif";
+          context.fillText(shapes[i].name, 16, radius);
+          context.restore();
+        }
+      }
+
       {
         showCursorLine &&
           drawCursorLines({
@@ -573,7 +581,7 @@ export const DistributionsChart: FC<DistributionsChartProps> = ({
                 />
               </div>
             )}
-            {anyAreNonnormalized && (
+            {anyAreNonnormalized && height > 20 && (
               <div className="flex-1 pt-2"> {nonNormalizedError()}</div>
             )}
           </div>

packages/website/src/pages/playground.mdx

@@ -4,7 +4,9 @@ description: Squiggle Playground
 
 import { PlaygroundPage } from "../components/PlaygroundPage";
 
-<PlaygroundPage version={props.version} />
+<div style={{ marginTop: 1 }}>
+  <PlaygroundPage version={props.version} />
+</div>
 
 export async function getServerSideProps({ query }) {
   return { props: { version: query.v ?? null } };