Mobile support
This commit is contained in:
parent
ad16c08e9c
commit
0bc016632f
|
@ -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>;
|
||||
};
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue
Block a user