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

Allows hiding controls

packages/components/src/components/DistributionChart.tsx

@@ -18,50 +18,33 @@ 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;
-      var result = (
+
-        <div>
+      // Check whether we should disable the checkbox
-          <Vega
+      var logCheckbox = (
-            spec={spec}
+        <CheckBox label="Log X scale" value={isLogX} onChange={setLogX} />
-            data={{ con: shape.value.continuous, dis: shape.value.discrete }}
-            width={widthProp}
-            height={height}
-            actions={false}
-          />
-        </div>
       );
-    } else {
+      if (massBelow0) {
-      var result = (
+        logCheckbox = (
-        <ErrorBox heading="Distribution Error">
-          {distributionErrorToString(shape.value)}
-        </ErrorBox>
-      );
-    }
-    return (
-      <>
-        {result}
-        <div>
-          {disableLog ? (
           <CheckBox
             label="Log X scale"
             value={isLogX}
@@ -71,13 +54,35 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
               "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} />
+      }
-          )}
+
+      var result = (
+        <div>
+          <Vega
+            spec={spec}
+            data={{ con: shape.value.continuous, dis: shape.value.discrete }}
+            width={widthProp}
+            height={height}
+            actions={false}
+          />
+          {showControls && (
+            <div>
+              {logCheckbox}
               <CheckBox label="Exp Y scale" value={isExpY} onChange={setExpY} />
             </div>
-      </>
+          )}
+        </div>
       );
+    } else {
+      var result = (
+        <ErrorBox heading="Distribution Error">
+          {distributionErrorToString(shape.value)}
+        </ErrorBox>
+      );
+    }
+
+    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> = ({