fixed width stuff, playground, and fonts after antd factor-out

Value: [1e-3 to 2e-2]
This commit is contained in:
Quinn Dougherty 2022-04-28 18:25:01 -04:00
parent fde75d4bc3
commit 3e124cd91c
4 changed files with 24 additions and 19 deletions

View File

@ -6,6 +6,7 @@ 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,
@ -24,19 +25,21 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
}: DistributionChartProps) => {
let shape = distribution.pointSet();
if (shape.tag === "Ok") {
return (
let widthProp = width ? width - 20 : undefined;
var result = (
<SquiggleVegaChart
data={{ con: shape.value.continuous, dis: shape.value.discrete }}
width={width - 20}
width={widthProp}
height={height}
actions={false}
/>
);
} else {
return (
var result = (
<ErrorBox heading="Distribution Error">
{distributionErrorToString(shape.value)}
</ErrorBox>
);
}
return result;
};

View File

@ -150,6 +150,12 @@ export interface SquiggleChartProps {
height?: number;
}
const ChartWrapper = styled.div`
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
`;
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
squiggleString = "",
sampleCount = 1000,
@ -158,11 +164,6 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
height = 60,
width = NaN,
}: SquiggleChartProps) => {
const target = React.useRef(null);
const [componentWidth] = useSize(target);
// I would have wanted to just use componentWidth, but this created infinite loops with SquiggleChart.stories.
//So you can manually add a width, as an escape hatch.
let _width = width || componentWidth;
let samplingInputs: samplingParams = {
sampleCount: sampleCount,
xyPointLength: outputXYPoints,
@ -173,15 +174,14 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
let expression = expressionResult.value;
onChange(expression);
internal = (
<SquiggleItem expression={expression} width={_width} height={height} />
<SquiggleItem expression={expression} width={width} height={height} />
);
} else {
// At this point, we came across an error. What was our error?
internal = (
<ErrorBox heading={"Parse Error"}>
{errorValueToString(expressionResult.value)}
</ErrorBox>
);
}
return <div ref={target}>{internal}</div>;
return <ChartWrapper>{internal}</ChartWrapper>;
};

View File

@ -3,9 +3,7 @@ import React, { FC, ReactElement, useState } from "react";
import ReactDOM from "react-dom";
import { SquiggleChart } from "./SquiggleChart";
import CodeEditor from "./CodeEditor";
// import { Form, Input, Row, Col } from "antd";
import styled from "styled-components";
// import "antd/dist/antd.css";
interface FieldFloatProps {
label: string;
@ -14,14 +12,14 @@ interface FieldFloatProps {
onChange: (value: number) => void;
}
const Input = styled.input``
const Input = styled.input``;
const FormItem = (props: {label:string, children:ReactElement}) => (
const FormItem = (props: { label: string; children: ReactElement }) => (
<div>
<label>{props.label}</label>
{props.children}
</div>
)
);
function FieldFloat(Props: FieldFloatProps) {
let [contents, setContents] = useState(Props.value + "");
@ -74,8 +72,11 @@ const Display = styled.div<TitleProps>`
max-height: ${(props) => props.maxHeight}px;
`;
const Row = styled.div``
const Col = styled.div``
const Row = styled.div`
display: grid;
grid-template-columns: 1fr 1fr;
`;
const Col = styled.div``;
let SquigglePlayground: FC<Props> = ({
initialSquiggleString = "",

View File

@ -3,6 +3,7 @@
"description": "A basic area chart example",
"width": 500,
"height": 100,
"autosize": "fit",
"padding": 5,
"data": [
{