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 { createClassFromSpec } from "react-vega";
import * as chartSpecification from "../vega-specs/spec-distributions.json"; import * as chartSpecification from "../vega-specs/spec-distributions.json";
import { ErrorBox } from "./ErrorBox"; import { ErrorBox } from "./ErrorBox";
import styled from "styled-components";
let SquiggleVegaChart = createClassFromSpec({ let SquiggleVegaChart = createClassFromSpec({
spec: chartSpecification as Spec, spec: chartSpecification as Spec,
@ -24,19 +25,21 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
}: DistributionChartProps) => { }: DistributionChartProps) => {
let shape = distribution.pointSet(); let shape = distribution.pointSet();
if (shape.tag === "Ok") { if (shape.tag === "Ok") {
return ( let widthProp = width ? width - 20 : undefined;
var result = (
<SquiggleVegaChart <SquiggleVegaChart
data={{ con: shape.value.continuous, dis: shape.value.discrete }} data={{ con: shape.value.continuous, dis: shape.value.discrete }}
width={width - 20} width={widthProp}
height={height} height={height}
actions={false} actions={false}
/> />
); );
} else { } else {
return ( var result = (
<ErrorBox heading="Distribution Error"> <ErrorBox heading="Distribution Error">
{distributionErrorToString(shape.value)} {distributionErrorToString(shape.value)}
</ErrorBox> </ErrorBox>
); );
} }
return result;
}; };

View File

@ -150,6 +150,12 @@ export interface SquiggleChartProps {
height?: number; 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> = ({ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
squiggleString = "", squiggleString = "",
sampleCount = 1000, sampleCount = 1000,
@ -158,11 +164,6 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
height = 60, height = 60,
width = NaN, width = NaN,
}: SquiggleChartProps) => { }: 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 = { let samplingInputs: samplingParams = {
sampleCount: sampleCount, sampleCount: sampleCount,
xyPointLength: outputXYPoints, xyPointLength: outputXYPoints,
@ -173,15 +174,14 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
let expression = expressionResult.value; let expression = expressionResult.value;
onChange(expression); onChange(expression);
internal = ( internal = (
<SquiggleItem expression={expression} width={_width} height={height} /> <SquiggleItem expression={expression} width={width} height={height} />
); );
} else { } else {
// At this point, we came across an error. What was our error?
internal = ( internal = (
<ErrorBox heading={"Parse Error"}> <ErrorBox heading={"Parse Error"}>
{errorValueToString(expressionResult.value)} {errorValueToString(expressionResult.value)}
</ErrorBox> </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 ReactDOM from "react-dom";
import { SquiggleChart } from "./SquiggleChart"; import { SquiggleChart } from "./SquiggleChart";
import CodeEditor from "./CodeEditor"; import CodeEditor from "./CodeEditor";
// import { Form, Input, Row, Col } from "antd";
import styled from "styled-components"; import styled from "styled-components";
// import "antd/dist/antd.css";
interface FieldFloatProps { interface FieldFloatProps {
label: string; label: string;
@ -14,14 +12,14 @@ interface FieldFloatProps {
onChange: (value: number) => void; 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> <div>
<label>{props.label}</label> <label>{props.label}</label>
{props.children} {props.children}
</div> </div>
) );
function FieldFloat(Props: FieldFloatProps) { function FieldFloat(Props: FieldFloatProps) {
let [contents, setContents] = useState(Props.value + ""); let [contents, setContents] = useState(Props.value + "");
@ -74,8 +72,11 @@ const Display = styled.div<TitleProps>`
max-height: ${(props) => props.maxHeight}px; max-height: ${(props) => props.maxHeight}px;
`; `;
const Row = styled.div`` const Row = styled.div`
const Col = styled.div`` display: grid;
grid-template-columns: 1fr 1fr;
`;
const Col = styled.div``;
let SquigglePlayground: FC<Props> = ({ let SquigglePlayground: FC<Props> = ({
initialSquiggleString = "", initialSquiggleString = "",

View File

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