Mobile support

This commit is contained in:
Sam Nolan 2022-05-02 15:36:20 +00:00
parent ad16c08e9c
commit 0bc016632f
3 changed files with 35 additions and 18 deletions

View File

@ -6,7 +6,6 @@ import { distributionErrorToString } from "@quri/squiggle-lang";
import { createClassFromSpec } from "react-vega";
import * as chartSpecification from "../vega-specs/spec-distributions.json";
import { ErrorBox } from "./ErrorBox";
import styled from "styled-components";
let SquiggleVegaChart = createClassFromSpec({
spec: chartSpecification as Spec,
@ -14,18 +13,34 @@ let SquiggleVegaChart = createClassFromSpec({
type DistributionChartProps = {
distribution: Distribution;
width: number;
width?: number;
height: number;
};
export const DistributionChart: React.FC<DistributionChartProps> = ({
distribution,
width,
height,
width,
}: DistributionChartProps) => {
// This code with refs and effects is a bit messy, and it's because we were
// having a large amount of trouble getting vega charts to be responsive. This
// is the solution we ended up with
const ref = React.useRef(null);
const [actualWidth, setActualWidth] = React.useState(undefined);
React.useEffect(() => {
// @ts-ignore
let getWidth = () => (ref.current ? ref.current.offsetWidth : 0);
window.addEventListener("resize", () => setActualWidth(getWidth()));
setActualWidth(getWidth());
}, [ref.current]);
let shape = distribution.pointSet();
if (shape.tag === "Ok") {
let widthProp = width ? width - 20 : undefined;
let widthProp = width ? width - 20 : actualWidth;
console.log("widthProp", widthProp);
var result = (
<SquiggleVegaChart
data={{ con: shape.value.continuous, dis: shape.value.discrete }}
@ -41,5 +56,5 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
</ErrorBox>
);
}
return result;
return <div ref={ref}>{result}</div>;
};

View File

@ -52,7 +52,7 @@ let RecordKeyHeader = styled.h3``;
export interface SquiggleItemProps {
/** The input string for squiggle */
expression: squiggleExpression;
width: number;
width?: number;
height: number;
}
@ -105,7 +105,11 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
return (
<VariableBox heading="Array">
{expression.value.map((r) => (
<SquiggleItem expression={r} width={width - 20} height={50} />
<SquiggleItem
expression={r}
width={width ? width - 20 : width}
height={50}
/>
))}
</VariableBox>
);
@ -115,7 +119,11 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
{Object.entries(expression.value).map(([key, r]) => (
<>
<RecordKeyHeader>{key}</RecordKeyHeader>
<SquiggleItem expression={r} width={width - 20} height={50} />
<SquiggleItem
expression={r}
width={width ? width - 20 : width}
height={50}
/>
</>
))}
</VariableBox>
@ -144,8 +152,6 @@ export interface SquiggleChartProps {
diagramStop?: number;
/** If the result is a function, how many points along the function it samples */
diagramCount?: number;
/** variables declared before this expression */
environment?: unknown;
/** When the environment changes */
onChange?(expr: squiggleExpression): void;
/** CSS width of the element */
@ -171,7 +177,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
height = 60,
bindings = defaultBindings,
jsImports = defaultImports,
width = NaN,
width,
}: SquiggleChartProps) => {
let samplingInputs: samplingParams = {
sampleCount: sampleCount,

View File

@ -32,16 +32,14 @@ export interface SquiggleEditorProps {
diagramStop?: number;
/** If the result is a function, how many points along the function it samples */
diagramCount?: number;
/** The environment, other variables that were already declared */
environment?: unknown;
/** when the environment changes. Used again for notebook magic*/
onChange?(expr: squiggleExpression): void;
/** The width of the element */
width: number;
/** Previous variable declarations */
bindings: bindings;
bindings?: bindings;
/** JS Imports */
jsImports: jsImports;
jsImports?: jsImports;
}
const Input = styled.div`
@ -52,7 +50,7 @@ const Input = styled.div`
export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
initialSquiggleString = "",
width = 500,
width,
sampleCount,
outputXYPoints,
kernelWidth,
@ -61,7 +59,6 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
diagramStop,
diagramCount,
onChange,
environment,
bindings = defaultBindings,
jsImports = defaultImports,
}: SquiggleEditorProps) => {
@ -87,7 +84,6 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
diagramStart={diagramStart}
diagramStop={diagramStop}
diagramCount={diagramCount}
environment={environment}
onChange={onChange}
bindings={bindings}
jsImports={jsImports}