From e7d5fb4ad8d90c720fff8a5b3a37a2da9b9738c0 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Thu, 14 Apr 2022 20:16:15 -0400 Subject: [PATCH] Changing styles of Playground --- packages/components/package.json | 2 + .../components/src/components/CodeEditor.tsx | 11 +- .../src/components/DistributionChart.tsx | 2 +- .../src/components/SquiggleChart.tsx | 39 +++-- .../src/components/SquiggleEditor.tsx | 2 + .../src/components/SquigglePlayground.tsx | 135 ++++++++---------- .../stories/SquigglePlayground.stories.mdx | 2 + yarn.lock | 54 ++++++- 8 files changed, 152 insertions(+), 95 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 791712f4..307a7cb6 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -3,6 +3,7 @@ "version": "0.1.8", "dependencies": { "@quri/squiggle-lang": "0.2.2", + "@react-hook/size": "^2.1.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.0.1", "@testing-library/user-event": "^14.0.4", @@ -11,6 +12,7 @@ "@types/node": "^17.0.23", "@types/react": "^18.0.3", "@types/react-dom": "^18.0.0", + "@types/styled-components": "^5.1.25", "antd": "^4.19.3", "cross-env": "^7.0.3", "lodash": "^4.17.21", diff --git a/packages/components/src/components/CodeEditor.tsx b/packages/components/src/components/CodeEditor.tsx index 71b66a5c..b052d7e1 100644 --- a/packages/components/src/components/CodeEditor.tsx +++ b/packages/components/src/components/CodeEditor.tsx @@ -10,12 +10,16 @@ interface CodeEditorProps { onChange: (value: string) => void; oneLine?: boolean; width?: number; + height: number; + showGutter?: boolean; } export let CodeEditor: FC = ({ value, onChange, oneLine = false, + showGutter = false, + height, }: CodeEditorProps) => { let lineCount = value.split("\n").length; let id = _.uniqueId(); @@ -25,9 +29,10 @@ export let CodeEditor: FC = ({ mode="golang" theme="github" width={"100%"} - minLines={oneLine ? lineCount : 15} - maxLines={oneLine ? lineCount : 15} - showGutter={false} + height={String(height) + "px"} + minLines={oneLine ? lineCount : undefined} + maxLines={oneLine ? lineCount : undefined} + showGutter={showGutter} highlightActiveLine={false} showPrintMargin={false} onChange={onChange} diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx index 6111476c..a27f325a 100644 --- a/packages/components/src/components/DistributionChart.tsx +++ b/packages/components/src/components/DistributionChart.tsx @@ -27,7 +27,7 @@ export const DistributionChart: React.FC = ({ return ( diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index 3605e93d..762a239f 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -10,6 +10,7 @@ import type { samplingParams, exportEnv } from "@quri/squiggle-lang"; import { NumberShower } from "./NumberShower"; import { DistributionChart } from "./DistributionChart"; import { ErrorBox } from "./ErrorBox"; +import useSize from "@react-hook/size"; export interface SquiggleChartProps { /** The input string for squiggle */ @@ -43,12 +44,17 @@ export interface SquiggleItemProps { } const ShowBox = styled.div` - border: 1px solid #ddd; + background: white; + border: 1px solid #eee; + border-radius: 2px; + margin-bottom: 0.4em; `; const ShowBoxHeading = styled.div` - border-bottom: 1px solid #ddd; - padding: 0.4em 0.8em; + border-bottom: 1px solid #eee; + padding-left: 0.8em; + padding-right: 0.8em; + padding-top: 0.1em; `; const ShowBoxPadding = styled.div` @@ -83,7 +89,14 @@ const SquiggleItem: React.FC = ({ } else if (expression.tag === "distribution") { let distType = expression.value.type(); return ( - + + {distType === "Symbolic" ? ( + <> +
{expression.value.toString()}
+ + ) : ( + <> + )} = ({ ); } else if (expression.tag === "string") { - return ({expression.value}); + return {`"${expression.value}"`}; } else if (expression.tag === "boolean") { return ( @@ -128,27 +141,33 @@ export const SquiggleChart: React.FC = ({ outputXYPoints = 1000, environment = [], onEnvChange = () => {}, - width = 500, height = 60, }: SquiggleChartProps) => { + const target = React.useRef(null); + const [width] = useSize(target); let samplingInputs: samplingParams = { sampleCount: sampleCount, xyPointLength: outputXYPoints, }; - let expressionResult = run(squiggleString, samplingInputs, environment); + let internal = <>; if (expressionResult.tag === "Ok") { onEnvChange(environment); let expression = expressionResult.value; - return ( - + internal = ( + ); } else { // At this point, we came across an error. What was our error? - return ( + internal = ( {errorValueToString(expressionResult.value)} ); } + return
{internal}
; }; diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index f393a2d7..c565b788 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -55,6 +55,8 @@ export let SquiggleEditor: React.FC = ({ value={expression} onChange={setExpression} oneLine={true} + showGutter={false} + height={20} /> = ({ initialSquiggleString = "" }: Props) => { +interface Props2 { + height: number; +} + +const ShowBox = styled.div` + border: 1px solid #eee; + border-radius: 2px; + height: ${props => props.height}; +`; + +const MyComponent = styled.div` + color: ${props => props.theme.colors.main}; +`; + + +interface TitleProps { + readonly maxHeight: number; +} + +const Display = styled.div` + background: #f6f6f6; + border-left: 1px solid #eee; + height: 100vh; + padding: 3px; + overflow-y: auto; + max-height: ${props => props.maxHeight}px; +`; + +let SquigglePlayground: FC = ({ initialSquiggleString = "", height = 300 }: Props) => { let [squiggleString, setSquiggleString] = useState(initialSquiggleString); let [sampleCount, setSampleCount] = useState(1000); let [outputXYPoints, setOutputXYPoints] = useState(1000); @@ -44,81 +74,34 @@ let SquigglePlayground: FC = ({ initialSquiggleString = "" }: Props) => { let [diagramStart, setDiagramStart] = useState(0); let [diagramStop, setDiagramStop] = useState(10); let [diagramCount, setDiagramCount] = useState(20); - var demoDist = ( - - ); return ( - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - - {demoDist} - + + + + + + + + + + + + ); }; export default SquigglePlayground; diff --git a/packages/components/src/stories/SquigglePlayground.stories.mdx b/packages/components/src/stories/SquigglePlayground.stories.mdx index 5aa20ba8..89ac5444 100644 --- a/packages/components/src/stories/SquigglePlayground.stories.mdx +++ b/packages/components/src/stories/SquigglePlayground.stories.mdx @@ -1,5 +1,6 @@ import SquigglePlayground from "../components/SquigglePlayground"; import { Canvas, Meta, Story, Props } from "@storybook/addon-docs"; +import styled from "styled-components"; @@ -15,6 +16,7 @@ including sampling settings, in squiggle. name="Normal" args={{ initialSquiggleString: "normal(5,2)", + height: 500, }} > {Template.bind({})} diff --git a/yarn.lock b/yarn.lock index 056754e3..3f0d39ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2197,6 +2197,11 @@ "@jridgewell/resolve-uri" "^3.0.3" "@jridgewell/sourcemap-codec" "^1.4.10" +"@juggle/resize-observer@^3.3.1": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0" + integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw== + "@leichtgewicht/ip-codec@^2.0.1": version "2.0.3" resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz#0300943770e04231041a51bd39f0439b5c7ab4f0" @@ -2321,6 +2326,35 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64" integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw== +"@react-hook/latest@^1.0.2": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@react-hook/latest/-/latest-1.0.3.tgz#c2d1d0b0af8b69ec6e2b3a2412ba0768ac82db80" + integrity sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg== + +"@react-hook/passive-layout-effect@^1.2.0": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e" + integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg== + +"@react-hook/resize-observer@^1.2.1": + version "1.2.5" + resolved "https://registry.yarnpkg.com/@react-hook/resize-observer/-/resize-observer-1.2.5.tgz#b59e2300de98bc6ddc6946942f21243cde10f984" + integrity sha512-qa0pPvRxq5VbdI8mMK2apPFsZOckhQ6D3Jc9yLuyHMNhui8yEih4qyFCZBDzzK3ymZS6LAltVSVg3l1Dg9vA0w== + dependencies: + "@juggle/resize-observer" "^3.3.1" + "@react-hook/latest" "^1.0.2" + "@react-hook/passive-layout-effect" "^1.2.0" + "@types/raf-schd" "^4.0.0" + raf-schd "^4.0.2" + +"@react-hook/size@^2.1.2": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@react-hook/size/-/size-2.1.2.tgz#87ed634ffb200f65d3e823501e5559aa3d584451" + integrity sha512-BmE5asyRDxSuQ9p14FUKJ0iBRgV9cROjqNG9jT/EjCM+xHha1HVqbPoT+14FQg1K7xIydabClCibUY4+1tw/iw== + dependencies: + "@react-hook/passive-layout-effect" "^1.2.0" + "@react-hook/resize-observer" "^1.2.1" + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -3980,6 +4014,11 @@ resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== +"@types/raf-schd@^4.0.0": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@types/raf-schd/-/raf-schd-4.0.1.tgz#1f9e03736f277fe9c7b82102bf18570a6ee19f82" + integrity sha512-Ha+EnKHFIh9EKW0/XZJPUd3EGDFisEvauaBd4VVCRPKeOqUxNEc9TodiY2Zhk33XCgzJucoFEcaoNcBAPHTQ2A== + "@types/range-parser@*": version "1.2.4" resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" @@ -4025,10 +4064,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.9.19", "@types/react@^18.0.1", "@types/react@^18.0.3": - version "18.0.3" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.3.tgz#baefa397561372015b9f8ba5bc83bc3f84ae8fcb" - integrity sha512-P8QUaMW4k+kH9aKNPl9b3XWcKMSSALYprLL8xpAMJOLUn3Pl6B+6nKC4F7dsk9oJPwkiRx+qlwhG/Zc1LxFVuQ== +"@types/react@*", "@types/react@17.0.43", "@types/react@^16.9.19", "@types/react@^18.0.3": + version "17.0.43" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55" + integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -4090,7 +4129,7 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== -"@types/styled-components@^5.1.24": +"@types/styled-components@^5.1.25": version "5.1.25" resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad" integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ== @@ -13554,6 +13593,11 @@ quick-lru@^5.1.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== +raf-schd@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" + integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== + raf@^3.4.1: version "3.4.1" resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"