squiggle/packages/components/src/components/FunctionChart.tsx
2022-08-30 15:16:57 +04:00

84 lines
2.2 KiB
TypeScript

import * as React from "react";
import { SqLambda, environment, SqValueTag } from "@quri/squiggle-lang";
import { FunctionChart1Dist } from "./FunctionChart1Dist";
import { FunctionChart1Number } from "./FunctionChart1Number";
import { DistributionPlottingSettings } from "./DistributionChart";
import { ErrorAlert, MessageAlert } from "./Alert";
export type FunctionChartSettings = {
start: number;
stop: number;
count: number;
};
interface FunctionChartProps {
fn: SqLambda;
chartSettings: FunctionChartSettings;
distributionPlotSettings: DistributionPlottingSettings;
environment: environment;
height: number;
}
export const FunctionChart: React.FC<FunctionChartProps> = ({
fn,
chartSettings,
environment,
distributionPlotSettings,
height,
}) => {
if (fn.parameters.length > 1) {
return (
<MessageAlert heading="Function Display Not Supported">
Only functions with one parameter are displayed.
</MessageAlert>
);
}
const result1 = fn.call([chartSettings.start]);
const result2 = fn.call([chartSettings.stop]);
const getValidResult = () => {
if (result1.tag === "Ok") {
return result1;
} else if (result2.tag === "Ok") {
return result2;
} else {
return result1;
}
};
const validResult = getValidResult();
if (validResult.tag === "Error") {
return (
<ErrorAlert heading="Error">{validResult.value.toString()}</ErrorAlert>
);
}
switch (validResult.value.tag) {
case SqValueTag.Distribution:
return (
<FunctionChart1Dist
fn={fn}
chartSettings={chartSettings}
environment={environment}
height={height}
distributionPlotSettings={distributionPlotSettings}
/>
);
case SqValueTag.Number:
return (
<FunctionChart1Number
fn={fn}
chartSettings={chartSettings}
environment={environment}
height={height}
/>
);
default:
return (
<MessageAlert heading="Function Display Not Supported">
There is no function visualization for this type of output:{" "}
<span className="font-bold">{validResult.value.tag}</span>
</MessageAlert>
);
}
};