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

Allows hiding controls

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<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;
 };

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<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 {

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<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> = ({