From 032f9a67926df8b5c76dd66d688ba9ea0103d7dd Mon Sep 17 00:00:00 2001 From: Nilay Majorwar Date: Tue, 22 Feb 2022 14:54:17 +0530 Subject: [PATCH] Add Box component to improve renderers performance --- languages/befunge93/renderer.tsx | 25 +++++++---- languages/brainfuck/common.ts | 7 ++- languages/brainfuck/renderer.tsx | 43 +++++++++++-------- .../shakespeare/renderer/character-row.tsx | 6 +-- languages/shakespeare/renderer/topbar.tsx | 31 ++++++------- .../renderer/utils.tsx => ui-utils.tsx} | 40 +++++++++-------- 6 files changed, 83 insertions(+), 69 deletions(-) rename languages/{shakespeare/renderer/utils.tsx => ui-utils.tsx} (56%) diff --git a/languages/befunge93/renderer.tsx b/languages/befunge93/renderer.tsx index 14d9ebe..02c2f07 100644 --- a/languages/befunge93/renderer.tsx +++ b/languages/befunge93/renderer.tsx @@ -1,10 +1,18 @@ -import { Card, Colors, Icon, IconName } from "@blueprintjs/core"; +import * as React from "react"; +import { Colors, Icon, IconName } from "@blueprintjs/core"; import { RendererProps } from "../types"; +import { Box } from "../ui-utils"; import { Bfg93Direction, Bfg93RS } from "./constants"; /** Common border color for dark and light, using transparency */ export const BorderColor = Colors.GRAY3 + "55"; +// Parameters for cell sizing, balanced to span the full row width +// Constraint: `(width% + 2 * margin%) * ROWSIZE = 100%` +const ROWSIZE = 8; +const CELL_WIDTH = "12%"; +const CELL_MARGIN = "5px 0.25%"; + const styles = { placeholderDiv: { height: "100%", @@ -33,9 +41,9 @@ const styles = { }, stackItem: { // Sizing - width: "10%", - height: "40px", - margin: "5px 0.25%", + width: CELL_WIDTH, + margin: CELL_MARGIN, + height: "50px", // Center-align values display: "flex", justifyContent: "center", @@ -50,10 +58,10 @@ const DirectionIcons: { [k: string]: IconName } = { [Bfg93Direction.DOWN]: "arrow-down", }; -const StackItem = ({ value }: { value: number }) => { - const cellStyle = { ...styles.stackItem }; - return {value}; -}; +/** Component for displaying a single stack item */ +const StackItem = React.memo(({ value }: { value: number }) => { + return {value}; +}); export const Renderer = ({ state }: RendererProps) => { if (state == null) @@ -64,7 +72,6 @@ export const Renderer = ({ state }: RendererProps) => {
Direction: - {/* */} String mode:{" "} diff --git a/languages/brainfuck/common.ts b/languages/brainfuck/common.ts index 9aaef30..cbdd1cd 100644 --- a/languages/brainfuck/common.ts +++ b/languages/brainfuck/common.ts @@ -81,9 +81,12 @@ export const editorTokensProvider: MonacoTokensProvider = { }; /** Serialize tape from object format into linear array */ -export const serializeTapeMap = (tape: BFRS["tape"]): number[] => { +export const serializeTapeMap = ( + tape: BFRS["tape"], + minCells: number = 0 +): number[] => { const cellIdxs = Object.keys(tape).map((s) => parseInt(s, 10)); - const maxCellIdx = Math.max(15, ...cellIdxs); + const maxCellIdx = Math.max(minCells - 1, ...cellIdxs); const linearTape: number[] = Array(maxCellIdx + 1).fill(0); cellIdxs.forEach((i) => (linearTape[i] = tape[i] || 0)); return linearTape; diff --git a/languages/brainfuck/renderer.tsx b/languages/brainfuck/renderer.tsx index 73e5aa0..ac4d82c 100644 --- a/languages/brainfuck/renderer.tsx +++ b/languages/brainfuck/renderer.tsx @@ -1,14 +1,17 @@ -import { Card, Colors } from "@blueprintjs/core"; -import { CSSProperties } from "react"; -import { useDarkMode } from "../../ui/providers/dark-mode-provider"; +import * as React from "react"; import { RendererProps } from "../types"; +import { Box } from "../ui-utils"; import { BFRS, serializeTapeMap } from "./common"; -// Colors used as background of active cells -const darkActiveBG = Colors.DARK_GRAY2; -const lightActiveBG = Colors.LIGHT_GRAY3; +/** Number of cells shown in a single row */ +const ROWSIZE = 8; -const styles: { [k: string]: CSSProperties } = { +// Parameters for cell sizing, balanced to span the full row width +// Constraint: `(width% + 2 * margin%) * ROWSIZE = 100%` +const CELL_WIDTH = "12%"; +const CELL_MARGIN = "5px 0.25%"; + +const styles: { [k: string]: React.CSSProperties } = { container: { padding: 10, height: "100%", @@ -19,9 +22,9 @@ const styles: { [k: string]: CSSProperties } = { }, cell: { // Sizing - width: "12%", + width: CELL_WIDTH, + margin: CELL_MARGIN, height: "50px", - margin: "5px 0.25%", // Center-align values display: "flex", justifyContent: "center", @@ -30,22 +33,24 @@ const styles: { [k: string]: CSSProperties } = { }; /** Component for displaying a single tape cell */ -const Cell = ({ value, active }: { value: number; active: boolean }) => { - const { isDark } = useDarkMode(); - const cellStyle = { ...styles.cell }; - const activeBg = isDark ? darkActiveBG : lightActiveBG; - if (active) { - cellStyle.backgroundColor = activeBg; - cellStyle.fontWeight = "bold"; +const Cell = React.memo( + ({ value, active }: { value: number; active: boolean }) => { + return ( + + {value} + + ); } - return {value}; -}; +); /** Renderer for Brainfuck */ export const Renderer = ({ state }: RendererProps) => { return (
- {serializeTapeMap(state?.tape || {}).map((num, i) => ( + {serializeTapeMap(state?.tape || {}, 2 * ROWSIZE).map((num, i) => ( ))}
diff --git a/languages/shakespeare/renderer/character-row.tsx b/languages/shakespeare/renderer/character-row.tsx index 741e34a..a30cd46 100644 --- a/languages/shakespeare/renderer/character-row.tsx +++ b/languages/shakespeare/renderer/character-row.tsx @@ -1,5 +1,5 @@ +import { Box } from "../../ui-utils"; import { CharacterValue } from "../common"; -import { SimpleTag } from "./utils"; type Props = { name: string; @@ -13,9 +13,9 @@ export const CharacterRow = (props: Props) => {
{name}:{" "} - 
{value.value}
+ 
{value.value}
{value.stack.map((v, i) => ( - {v} + {v} ))}
diff --git a/languages/shakespeare/renderer/topbar.tsx b/languages/shakespeare/renderer/topbar.tsx index 07c7533..cbf0640 100644 --- a/languages/shakespeare/renderer/topbar.tsx +++ b/languages/shakespeare/renderer/topbar.tsx @@ -1,5 +1,6 @@ -import { Tag, Text } from "@blueprintjs/core"; -import { SimpleTag } from "./utils"; +import React from "react"; +import { Text } from "@blueprintjs/core"; +import { Box } from "../../ui-utils"; const styles = { charChip: { @@ -22,20 +23,16 @@ export const TopBar = (props: Props) => { const characterChips = charactersOnStage.length === 0 ? ( - - The stage is empty - + The stage is empty ) : ( - charactersOnStage.map((character) => { - return ( - - {character} - - ); - }) + charactersOnStage.map((character) => ( + + {character} + + )) ); return ( @@ -46,9 +43,9 @@ export const TopBar = (props: Props) => { Answer to question: - + {questionState ? "yes" : "no"} - + )}
diff --git a/languages/shakespeare/renderer/utils.tsx b/languages/ui-utils.tsx similarity index 56% rename from languages/shakespeare/renderer/utils.tsx rename to languages/ui-utils.tsx index a1f901d..ddba4c8 100644 --- a/languages/shakespeare/renderer/utils.tsx +++ b/languages/ui-utils.tsx @@ -1,41 +1,43 @@ +import { CSSProperties } from "react"; import { Colors } from "@blueprintjs/core"; -import { useDarkMode } from "../../../ui/providers/dark-mode-provider"; +import { useDarkMode } from "../ui/providers/dark-mode-provider"; const backgroundColorsLight = { - success: Colors.GREEN3, - danger: Colors.RED3, - plain: Colors.GRAY3, - active: Colors.DARK_GRAY1, + success: Colors.GREEN5, + danger: Colors.RED5, + plain: Colors.LIGHT_GRAY1, + active: Colors.GRAY4, }; const backgroundColorsDark = { - success: Colors.GREEN3, - danger: Colors.RED3, - plain: Colors.GRAY3, - active: Colors.LIGHT_GRAY5, + success: Colors.GREEN1, + danger: Colors.RED1, + plain: Colors.DARK_GRAY5, + active: Colors.GRAY1, }; const foregroundColorsLight = { - success: Colors.GREEN2, - danger: Colors.RED2, + success: Colors.GREEN1, + danger: Colors.RED1, plain: Colors.DARK_GRAY1, - active: Colors.LIGHT_GRAY5, + active: Colors.DARK_GRAY1, }; const foregroundColorsDark = { success: Colors.GREEN5, danger: Colors.RED5, plain: Colors.LIGHT_GRAY5, - active: Colors.DARK_GRAY1, + active: Colors.LIGHT_GRAY5, }; /** - * Utility component that renders a tag similar to BlueprintJS tags, but underneath - * is just a single span tag with no frills and high performance. + * Utility component for rendering a simple general-purpose stylable box. Useful + * for performance-critical components in visualisation renderers. */ -export const SimpleTag = (props: { +export const Box = (props: { children: React.ReactNode; - intent?: "success" | "danger" | "active"; + intent?: "plain" | "success" | "danger" | "active"; + style?: CSSProperties; }) => { const { isDark } = useDarkMode(); const intent = props.intent == null ? "plain" : props.intent; @@ -49,9 +51,9 @@ export const SimpleTag = (props: { margin: 5, padding: "5px 10px", borderRadius: 3, - backgroundColor: - backgroundMap[intent] + (intent === "active" ? "aa" : "55"), + backgroundColor: backgroundMap[intent], color: foregroundMap[intent], + ...props.style, }} > {props.children}