Merge pull request #461 from quantified-uncertainty/show-controls
Allows hiding controls
This commit is contained in:
commit
74f5dbbbf0
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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> = ({
|
||||
|
|
Loading…
Reference in New Issue
Block a user