Merge pull request #2525 from quantified-uncertainty/quick-calculator…

…-fixes

Quick calculator fixes

.changeset/tidy-scissors-promise.md

@@ -0,0 +1,6 @@
+---
+"@quri/squiggle-lang": patch
+"@quri/squiggle-components": patch
+---
+
+Calculator result functions no longer re-run on input changes. Calculator inputs can be empty, if the function doesn't take any arguments

packages/components/src/components/Calculator/CalculatorResult.tsx

@@ -1,7 +1,8 @@
-import { FC, useEffect, useMemo, useState, useCallback } from "react";
+import { FC, useCallback, useEffect, useMemo, useState } from "react";
 
 import { Env, SqValue } from "@quri/squiggle-lang";
 
+import { Button } from "@quri/ui";
 import { PlaygroundSettings } from "../PlaygroundSettings.js";
 import { ValueResultViewer } from "./ValueResultViewer.js";
 import {
@@ -10,7 +11,6 @@ import {
   SqValueResult,
 } from "./types.js";
 import { useSavedCalculatorState } from "./useSavedCalculatorState.js";
-import { Button } from "@quri/ui";
 
 type Props = {
   valueWithContext: SqCalculatorValueWithContext;

packages/components/src/components/Calculator/ValueResultViewer.tsx

@@ -1,15 +1,18 @@
-import { FC } from "react";
+import { memo } from "react";
 
 import { valueHasContext } from "../../lib/utility.js";
 import { PlaygroundSettings } from "../PlaygroundSettings.js";
 import { getSqValueWidget } from "../SquiggleViewer/getSqValueWidget.js";
 import { SqValueResult } from "./types.js";
 
 // Unlike ValueViewer/ValueWithContextViewer, this just renders the raw widget; TODO - better name?
-export const ValueResultViewer: FC<{
+export const ValueResultViewer = memo(function ValueResultViewer({
+  result,
+  settings,
+}: {
   result: SqValueResult;
   settings: PlaygroundSettings;
-}> = ({ result, settings }) => {
+}) {
   if (result.ok) {
     const value = result.value;
     if (valueHasContext(value)) {
@@ -24,4 +27,4 @@ export const ValueResultViewer: FC<{
       </div>
     );
   }
-};
+});

packages/components/src/components/Calculator/index.tsx

@@ -212,19 +212,26 @@ export const Calculator: FC<Props> = ({
   const { calculator, form, inputResults, processAllFieldCodes } =
     useCalculator(valueWithContext, _environment);
 
-  const inputResultSettings: PlaygroundSettings = {
-    ...settings,
-    distributionChartSettings: {
-      ...settings.distributionChartSettings,
-      showSummary: false,
-    },
-    chartHeight: 30,
-  };
-
-  const calculatorResultSettings: PlaygroundSettings = {
-    ...settings,
-    chartHeight: 200,
-  };
+  const inputResultSettings: PlaygroundSettings = useMemo(
+    () => ({
+      ...settings,
+      distributionChartSettings: {
+        ...settings.distributionChartSettings,
+        showSummary: false,
+      },
+      chartHeight: 30,
+    }),
+    [settings]
+  );
+
+  //This memoization is useful to make sure that CalculatorResult ResultViewer doesn't get updated too frequently.
+  const calculatorResultSettings: PlaygroundSettings = useMemo(
+    () => ({
+      ...settings,
+      chartHeight: 200,
+    }),
+    [settings]
+  );
 
   const hasTitleOrDescription = !!calculator.title || !!calculator.description;
 

packages/components/src/components/SquiggleViewer/ItemSettingsMenu.tsx

@@ -17,6 +17,7 @@ import {
   useSetLocalItemState,
   useViewerContext,
   useResetStateSettings,
+  useMergedSettings,
 } from "./ViewerProvider.js";
 import { pathAsString } from "./utils.js";
 
@@ -38,11 +39,11 @@ const ItemSettingsModal: React.FC<
   resetScroll,
 }) => {
   const setLocalItemState = useSetLocalItemState();
-  const { getLocalItemState, getMergedSettings } = useViewerContext();
+  const { getLocalItemState } = useViewerContext();
 
   const { path } = value.context;
 
-  const mergedSettings = getMergedSettings({ path });
+  const mergedSettings = useMergedSettings(path);
 
   const form = useForm({
     resolver: zodResolver(viewSettingsSchema),