Merge pull request #461 from quantified-uncertainty/show-controls

Allows hiding controls
This commit is contained in:
Sam Nolan 2022-05-02 17:44:09 -04:00 committed by GitHub
commit 74f5dbbbf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 25 deletions

View File

@ -18,27 +18,45 @@ type DistributionChartProps = {
distribution: Distribution;
width?: number;
height: number;
/** Whether to show the user graph controls (scale etc) */
showControls?: boolean;
};
export const DistributionChart: React.FC<DistributionChartProps> = ({
distribution,
height,
width,
showControls = false,
}: DistributionChartProps) => {
let [isLogX, setLogX] = React.useState(false);
let [isExpY, setExpY] = React.useState(false);
let shape = distribution.pointSet();
const [sized, _] = useSize((size) => {
var disableLog = false;
if (shape.tag === "Ok") {
let massBelow0 =
shape.value.continuous.some((x) => x.x <= 0) ||
shape.value.discrete.some((x) => x.x <= 0);
if (massBelow0) {
disableLog = true;
}
let spec = buildVegaSpec(isLogX, isExpY);
let widthProp = width ? width - 20 : size.width - 10;
// Check whether we should disable the checkbox
var logCheckbox = (
<CheckBox label="Log X scale" value={isLogX} onChange={setLogX} />
);
if (massBelow0) {
logCheckbox = (
<CheckBox
label="Log X scale"
value={isLogX}
onChange={setLogX}
disabled={true}
tooltip={
"Your distribution has mass lower than or equal to 0. Log only works on strictly positive values."
}
/>
);
}
var result = (
<div>
<Vega
@ -48,6 +66,12 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
height={height}
actions={false}
/>
{showControls && (
<div>
{logCheckbox}
<CheckBox label="Exp Y scale" value={isExpY} onChange={setExpY} />
</div>
)}
</div>
);
} else {
@ -57,27 +81,8 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
</ErrorBox>
);
}
return (
<>
{result}
<div>
{disableLog ? (
<CheckBox
label="Log X scale"
value={isLogX}
onChange={setLogX}
disabled={true}
tooltip={
"Your distribution has mass lower than or equal to 0. Log only works on strictly positive values."
}
/>
) : (
<CheckBox label="Log X scale" value={isLogX} onChange={setLogX} />
)}
<CheckBox label="Exp Y scale" value={isExpY} onChange={setExpY} />
</div>
</>
);
return result;
});
return sized;
};

View File

@ -67,6 +67,8 @@ export interface SquiggleItemProps {
height: number;
/** Whether to show type information */
showTypes?: boolean;
/** Whether to show users graph controls (scale etc) */
showControls?: boolean;
}
const SquiggleItem: React.FC<SquiggleItemProps> = ({
@ -74,6 +76,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
width,
height,
showTypes = false,
showControls = false,
}: SquiggleItemProps) => {
switch (expression.tag) {
case "number":
@ -100,6 +103,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
distribution={expression.value}
height={height}
width={width}
showControls={showControls}
/>
</VariableBox>
);
@ -185,6 +189,8 @@ export interface SquiggleChartProps {
jsImports?: jsImports;
/** Whether to show type information about returns, default false */
showTypes?: boolean;
/** Whether to show graph controls (scale etc)*/
showControls?: boolean;
}
const ChartWrapper = styled.div`
@ -203,6 +209,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
jsImports = defaultImports,
width,
showTypes = false,
showControls = false,
}: SquiggleChartProps) => {
let samplingInputs: samplingParams = {
sampleCount: sampleCount,
@ -224,6 +231,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
width={width}
height={height}
showTypes={showTypes}
showControls={showControls}
/>
);
} else {

View File

@ -42,6 +42,8 @@ export interface SquiggleEditorProps {
jsImports?: jsImports;
/** Whether to show detail about types of the returns, default false */
showTypes?: boolean;
/** Whether to give users access to graph controls */
showControls: boolean;
}
const Input = styled.div`
@ -64,6 +66,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
bindings = defaultBindings,
jsImports = defaultImports,
showTypes = false,
showControls = false,
}: SquiggleEditorProps) => {
let [expression, setExpression] = React.useState(initialSquiggleString);
return (
@ -91,6 +94,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
bindings={bindings}
jsImports={jsImports}
showTypes={showTypes}
showControls={showControls}
/>
</div>
);
@ -149,6 +153,8 @@ export interface SquigglePartialProps {
bindings?: bindings;
/** Variables imported from js */
jsImports?: jsImports;
/** Whether to give users access to graph controls */
showControls?: boolean;
}
export let SquigglePartial: React.FC<SquigglePartialProps> = ({