Merge pull request #2955 from quantified-uncertainty/relative-value-f…

…ixes

Relative value fixes

packages/hub/src/app/models/[owner]/[slug]/relative-values/[variableName]/RelativeValuesModelLayout.tsx

@@ -114,10 +114,12 @@ export const RelativeValuesModelLayout: FC<
 
   useEffect(() => {
     // ModelEvaluator.create is async because SqProject.run is async
-    ModelEvaluator.create(content.code, forRelativeValues.cache).then(
-      setEvaluatorResult
-    );
-  }, [content.code, forRelativeValues]);
+    ModelEvaluator.create(
+      content.code,
+      variableName,
+      forRelativeValues.cache
+    ).then(setEvaluatorResult);
+  }, [content.code, variableName, forRelativeValues]);
 
   const body = evaluatorResult ? (
     evaluatorResult.ok ? (

packages/hub/src/graphql/mutations/buildRelativeValuesCache.ts

@@ -44,7 +44,10 @@ builder.mutationField("buildRelativeValuesCache", (t) =>
         throw new Error("Model content not found");
       }
 
-      const evaluatorResult = await ModelEvaluator.create(squiggleSnippet.code);
+      const evaluatorResult = await ModelEvaluator.create(
+        squiggleSnippet.code,
+        relativeValuesExport.variableName
+      );
       if (!evaluatorResult.ok) {
         throw new Error(
           `Failed to create evaluator: ${evaluatorResult.value.toString()}`

packages/hub/src/relative-values/components/views/ListView/index.tsx

@@ -250,6 +250,7 @@ export const ListView: FC = () => {
             <div className="sticky top-4 bg-slate-50 px-2 py-4 ml-4 rounded-sm border-gray-200 border">
               <ItemSideBar
                 model={model}
+                variableName={model.variableName}
                 numeratorItem={sidebarItems[0]}
                 denominatorItem={sidebarItems[1]}
               />

packages/hub/src/relative-values/components/views/ListView/sidebar.tsx

@@ -30,49 +30,95 @@ const TableRow: React.FC<TableRowProps> = ({ label, number }) => (
   </Fragment>
 );
 
-let buildurl = (
+let buildSquiggleCode = (
   model: ModelEvaluator,
   numeratorItem: Item,
-  denominatorItem: Item
+  denominatorItem: Item,
+  variableName: string
 ) => {
   const toVarName = (id: string) => id.replace(/-/g, "_");
   const numeratorItemName = toVarName(numeratorItem.id);
   const denominatorItemName = toVarName(denominatorItem.id);
   return `${model.modelCode}
 // ------- AUTOGENERATED CODE -------
-dists = fn("${numeratorItem.id}", "${denominatorItem.id}")
-value_${numeratorItemName} = dists[0]
-value_${denominatorItemName} = dists[1]
-relativeValue = value_${numeratorItemName} / value_${denominatorItemName}
-median = abs(inv(dists[1], 0.5))
+dists = ${variableName}("${numeratorItem.id}", "${denominatorItem.id}")
+value_${numeratorItemName} = Dist(dists[0])
+value_${denominatorItemName} = Dist(dists[1])
+valueRatio = value_${numeratorItemName} / value_${denominatorItemName}
+medianDenominator = abs(median(value_${denominatorItemName}))
 tickFormat = '10'
 tickFormatObj = {tickFormat: tickFormat}
 
-[Plot.scatter({xDist:dists[1] / median, yDist: dists[0]/median, xScale: Scale.symlog(tickFormatObj), yScale: Scale.symlog(tickFormatObj)}), Plot.dist({
-  dist: relativeValue,
-  xScale: Scale.symlog(tickFormatObj),
-  yScale: Scale.symlog(tickFormatObj),
-  showSummary: false,
-})]`;
+@name("Normalized Scatter Plot")
+scatter = Plot.scatter(
+  {
+    xDist: SampleSet(dists[1] / medianDenominator),
+    yDist: SampleSet(dists[0] / medianDenominator),
+    xScale: Scale.symlog(
+      { tickFormatObj, title: "${numeratorItem.name}" }
+    ),
+    yScale: Scale.symlog(
+      { tickFormatObj, title: "${denominatorItem.name}" }
+    ),
+  }
+)
+
+@name("Debug")
+debug = [
+  scatter,
+  Tag.name(
+    [
+      Tag.name(
+        Plot.dist(dists[0], { xScale: Scale.symlog() }),
+        "${numeratorItem.name}"
+      ),
+      Tag.name(
+        Plot.dist(dists[1], { xScale: Scale.symlog() }),
+        "${denominatorItem.name}"
+      ),
+    ],
+    "Distributions"
+  ),
+]
+
+@name("Ratio Distribution")
+ratio = Plot.dist(
+  {
+    dist: valueRatio,
+    xScale: Scale.symlog(tickFormatObj),
+    yScale: Scale.symlog(tickFormatObj),
+    showSummary: false,
+  }
+)
+
+ratio
+`;
 };
 
 type Props = {
   model: ModelEvaluator;
   numeratorItem: Item;
   denominatorItem: Item;
+  variableName: string;
 };
 
 export const ItemSideBar: FC<Props> = ({
   model,
   numeratorItem,
+  variableName,
   denominatorItem,
 }) => {
   const result = model.compare(numeratorItem.id, denominatorItem.id);
   if (!result.ok) {
     return <div>Result not found</div>;
   } else {
     let item = result.value;
-    const squggleCode = buildurl(model, numeratorItem, denominatorItem);
+    const squggleCode = buildSquiggleCode(
+      model,
+      numeratorItem,
+      denominatorItem,
+      variableName
+    );
 
     // It would be better to not load SquiggleChart, but rather, a lower-level compontent. That can be refactored later.
     return (

packages/hub/src/relative-values/components/views/PlotView/ForcePlot.tsx

@@ -173,6 +173,7 @@ export const ForcePlot: FC<{
     simulation.nodes(nodes);
 
     return simulation;
+    //Note: Don't add ``forceFn`` to the dependencies. ``forcefn`` is unstable, so this will cause unnecessary rerenders.
   }, [model, nodes]);
 
   useEffect(() => {

packages/hub/src/relative-values/components/views/PlotView/index.tsx

@@ -26,13 +26,10 @@ export const PlotView: FC = () => {
     <div
       className="grid gap-2"
       style={{
-        gridTemplateColumns: "1fr 1fr minmax(120px, max-content)",
+        gridTemplateColumns: "1fr minmax(120px, max-content)",
       }}
     >
-      <Section title="Value and Uncertainty" border>
-        <ValueAndUncertaintyPlot model={model} />
-      </Section>
-      <Section title="Force" border>
+      <Section title="Similarity Cluster Map" border>
         <ForcePlot model={model} />
       </Section>
       <Section title="Clusters">

packages/hub/src/relative-values/values/ModelEvaluator.ts

@@ -94,19 +94,21 @@ function buildRelativeValue({
 export class ModelEvaluator {
   private constructor(
     public modelCode: string,
+    public variableName: string,
     private fn: SqLambda,
     private cache?: RelativeValuesCacheRecord
   ) {}
 
   static async create(
     modelCode: string,
+    variableName: string,
     cache?: RelativeValuesExport$data["cache"]
   ): Promise<result<ModelEvaluator, string>> {
     // TODO - versioned SqProject
     const project = SqProject.create({
       linker: squiggleHubLinker,
     });
-    project.setSource("wrapper", "RelativeValues.wrap(fn)");
+    project.setSource("wrapper", `RelativeValues.wrap(${variableName})`);
     project.setContinues("wrapper", ["model"]);
     project.setSource("model", modelCode);
 
@@ -151,7 +153,12 @@ export class ModelEvaluator {
 
     return {
       ok: true,
-      value: new ModelEvaluator(modelCode, result.value.value, cacheRecord),
+      value: new ModelEvaluator(
+        modelCode,
+        variableName,
+        result.value.value,
+        cacheRecord
+      ),
     };
   }
 

packages/squiggle-lang/src/fr/relativeValues.ts

@@ -66,7 +66,7 @@ export function makeSquiggleDefinitions(builtins: Bindings) {
     dists = fn(x,y)
     dist1 = SampleSet(dists[0])
     dist2 = SampleSet(dists[1])
-    dist = dists[0] / dists[1]
+    dist = Dist(dists[0] / dists[1])
     {
       median: inv(dist, 0.5),
       mean: mean(dist),