From da8a834b7e0e6fece063259385894f9c69dd811a Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Mon, 2 May 2022 21:33:34 +0000 Subject: [PATCH 1/2] Allows hiding controls --- .../src/components/DistributionChart.tsx | 55 ++++++++++--------- .../src/components/SquiggleChart.tsx | 8 +++ .../src/components/SquiggleEditor.tsx | 6 ++ 3 files changed, 44 insertions(+), 25 deletions(-) diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx index f43b642c..5eafecf9 100644 --- a/packages/components/src/components/DistributionChart.tsx +++ b/packages/components/src/components/DistributionChart.tsx @@ -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 = ({ 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 = ( + + ); + if (massBelow0) { + logCheckbox = ( + + ); + } + var result = (
= ({ height={height} actions={false} /> + {showControls && ( +
+ {logCheckbox} + +
+ )}
); } else { @@ -57,27 +81,8 @@ export const DistributionChart: React.FC = ({ ); } - return ( - <> - {result} -
- {disableLog ? ( - - ) : ( - - )} - -
- - ); + + return result; }); return sized; }; diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index 3210b1d8..a9fde172 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -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 = ({ @@ -74,6 +76,7 @@ const SquiggleItem: React.FC = ({ width, height, showTypes = false, + showControls = false, }: SquiggleItemProps) => { switch (expression.tag) { case "number": @@ -100,6 +103,7 @@ const SquiggleItem: React.FC = ({ distribution={expression.value} height={height} width={width} + showControls={showControls} /> ); @@ -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 = ({ jsImports = defaultImports, width, showTypes = false, + showControls = false, }: SquiggleChartProps) => { let samplingInputs: samplingParams = { sampleCount: sampleCount, @@ -224,6 +231,7 @@ export const SquiggleChart: React.FC = ({ width={width} height={height} showTypes={showTypes} + showControls={showControls} /> ); } else { diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index 9a453ab8..572dbd76 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -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 = ({ 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 = ({ bindings={bindings} jsImports={jsImports} showTypes={showTypes} + showControls={showControls} /> ); @@ -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 = ({ From 5df9d0e51b8e919d1e8f6519292738b5bd8c51c7 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Mon, 2 May 2022 21:51:58 +0000 Subject: [PATCH 2/2] Pass showTypes and showControls in playground --- .../components/src/components/SquigglePlayground.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 93e1d963..424cff8d 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -43,6 +43,8 @@ function FieldFloat(Props: FieldFloatProps) { interface Props { initialSquiggleString?: string; height?: number; + showTypes?: boolean; + showControls?: boolean; } interface Props2 { @@ -55,10 +57,6 @@ const ShowBox = styled.div` height: ${(props) => props.height}; `; -const MyComponent = styled.div` - color: ${(props) => props.theme.colors.main}; -`; - interface TitleProps { readonly maxHeight: number; } @@ -81,6 +79,8 @@ const Col = styled.div``; let SquigglePlayground: FC = ({ initialSquiggleString = "", height = 300, + showTypes = false, + showControls = false, }: Props) => { let [squiggleString, setSquiggleString] = useState(initialSquiggleString); let [sampleCount, setSampleCount] = useState(1000); @@ -112,6 +112,8 @@ let SquigglePlayground: FC = ({ diagramCount={diagramCount} pointDistLength={pointDistLength} height={150} + showTypes={showTypes} + showControls={showControls} />