From afeec3c876f92932bb91419f4de0125ce95db553 Mon Sep 17 00:00:00 2001 From: Brian Ward Date: Fri, 26 Jul 2024 19:04:52 +0000 Subject: [PATCH] Pull out clearing innerHTML --- .../Scripting/Analysis/AnalysisPyWindow.tsx | 12 ++++----- .../Scripting/Analysis/AnalysisRWindow.tsx | 8 ++---- .../Scripting/Analysis/useAnalysisState.ts | 8 ++---- .../Scripting/DataGeneration/DataPyWindow.tsx | 10 +++++--- .../Scripting/DataGeneration/DataRWindow.tsx | 5 ++-- .../DataGeneration/useDataGenState.ts | 2 +- gui/src/app/Scripting/OutputDivUtils.tsx | 25 +++++++++++++++++++ gui/src/app/Scripting/ScriptEditor.tsx | 18 ------------- gui/src/app/Scripting/webR/runR.ts | 2 +- 9 files changed, 44 insertions(+), 46 deletions(-) create mode 100644 gui/src/app/Scripting/OutputDivUtils.tsx diff --git a/gui/src/app/Scripting/Analysis/AnalysisPyWindow.tsx b/gui/src/app/Scripting/Analysis/AnalysisPyWindow.tsx index 7976ba59..34076612 100644 --- a/gui/src/app/Scripting/Analysis/AnalysisPyWindow.tsx +++ b/gui/src/app/Scripting/Analysis/AnalysisPyWindow.tsx @@ -3,7 +3,10 @@ import { StanRun } from "@SpStanSampler/useStanSampler"; import { FileNames } from "@SpCore/FileMapping"; import { ProjectKnownFiles } from "@SpCore/ProjectDataModel"; import useTemplatedFillerText from "@SpScripting/useTemplatedFillerText"; -import { writeConsoleOutToDiv } from "@SpScripting/ScriptEditor"; +import { + clearOutputDivs, + writeConsoleOutToDiv, +} from "@SpScripting/OutputDivUtils"; import usePyodideWorker from "@SpScripting/pyodide/usePyodideWorker"; import PlottingScriptEditor from "@SpScripting/PlottingScriptEditor"; import useAnalysisState from "./useAnalysisState"; @@ -57,12 +60,7 @@ const AnalysisPyWindow: FunctionComponent = ({ const handleRun = useCallback( (code: string) => { - if (consoleRef.current) { - consoleRef.current.innerHTML = ""; - } - if (imagesRef.current) { - imagesRef.current.innerHTML = ""; - } + clearOutputDivs(consoleRef, imagesRef); run(code, spData, { loadsDraws: true, showsPlots: true, diff --git a/gui/src/app/Scripting/Analysis/AnalysisRWindow.tsx b/gui/src/app/Scripting/Analysis/AnalysisRWindow.tsx index 6ef65a53..b8138577 100644 --- a/gui/src/app/Scripting/Analysis/AnalysisRWindow.tsx +++ b/gui/src/app/Scripting/Analysis/AnalysisRWindow.tsx @@ -5,6 +5,7 @@ import { ProjectKnownFiles } from "@SpCore/ProjectDataModel"; import PlottingScriptEditor from "@SpScripting/PlottingScriptEditor"; import runR from "@SpScripting/webR/runR"; import useTemplatedFillerText from "@SpScripting/useTemplatedFillerText"; +import { clearOutputDivs } from "@SpScripting/OutputDivUtils"; import loadDrawsCode from "@SpScripting/webR/sp_load_draws.R?raw"; import useAnalysisState from "./useAnalysisState"; @@ -29,12 +30,7 @@ const AnalysisRWindow: FunctionComponent = ({ const handleRun = useCallback( async (userCode: string) => { - if (consoleRef.current) { - consoleRef.current.innerHTML = ""; - } - if (imagesRef.current) { - imagesRef.current.innerHTML = ""; - } + clearOutputDivs(consoleRef, imagesRef); const code = loadDrawsCode + userCode; await runR({ code, diff --git a/gui/src/app/Scripting/Analysis/useAnalysisState.ts b/gui/src/app/Scripting/Analysis/useAnalysisState.ts index 1923073d..7bdec3f7 100644 --- a/gui/src/app/Scripting/Analysis/useAnalysisState.ts +++ b/gui/src/app/Scripting/Analysis/useAnalysisState.ts @@ -2,6 +2,7 @@ import { InterpreterStatus, isInterpreterBusy, } from "@SpScripting/InterpreterTypes"; +import { clearOutputDivs } from "@SpScripting/OutputDivUtils"; import { StanRun } from "@SpStanSampler/useStanSampler"; import { useEffect, useMemo, useRef, useState } from "react"; @@ -19,12 +20,7 @@ const useAnalysisState = (latestRun: StanRun) => { const imagesRef = useRef(null); useEffect(() => { - if (imagesRef.current) { - imagesRef.current.innerHTML = ""; - } - if (consoleRef.current) { - consoleRef.current.innerHTML = ""; - } + clearOutputDivs(consoleRef, imagesRef); }, [latestRun.draws]); const { draws, paramNames, samplingOpts, status: samplerStatus } = latestRun; diff --git a/gui/src/app/Scripting/DataGeneration/DataPyWindow.tsx b/gui/src/app/Scripting/DataGeneration/DataPyWindow.tsx index 6040eea7..bd6f5241 100644 --- a/gui/src/app/Scripting/DataGeneration/DataPyWindow.tsx +++ b/gui/src/app/Scripting/DataGeneration/DataPyWindow.tsx @@ -2,7 +2,11 @@ import { FunctionComponent, useCallback, useMemo } from "react"; import { FileNames } from "@SpCore/FileMapping"; import { ProjectKnownFiles } from "@SpCore/ProjectDataModel"; import useTemplatedFillerText from "@SpScripting/useTemplatedFillerText"; -import ScriptEditor, { writeConsoleOutToDiv } from "@SpScripting/ScriptEditor"; +import ScriptEditor from "@SpScripting/ScriptEditor"; +import { + clearOutputDivs, + writeConsoleOutToDiv, +} from "@SpScripting/OutputDivUtils"; import usePyodideWorker from "@SpScripting/pyodide/usePyodideWorker"; import useDataGenState from "./useDataGenState"; @@ -34,9 +38,7 @@ const DataPyWindow: FunctionComponent = () => { const handleRun = useCallback( (code: string) => { - if (consoleRef.current) { - consoleRef.current.innerHTML = ""; - } + clearOutputDivs(consoleRef); run( code, {}, diff --git a/gui/src/app/Scripting/DataGeneration/DataRWindow.tsx b/gui/src/app/Scripting/DataGeneration/DataRWindow.tsx index 4563fe93..91facd92 100644 --- a/gui/src/app/Scripting/DataGeneration/DataRWindow.tsx +++ b/gui/src/app/Scripting/DataGeneration/DataRWindow.tsx @@ -1,5 +1,6 @@ import { FunctionComponent, useCallback } from "react"; import ScriptEditor from "@SpScripting/ScriptEditor"; +import { clearOutputDivs } from "@SpScripting/OutputDivUtils"; import { FileNames } from "@SpCore/FileMapping"; import { ProjectKnownFiles } from "@SpCore/ProjectDataModel"; import runR from "@SpScripting/webR/runR"; @@ -22,9 +23,7 @@ const DataRWindow: FunctionComponent = () => { const handleRun = useCallback( async (code: string) => { - if (consoleRef.current) { - consoleRef.current.innerHTML = ""; - } + clearOutputDivs(consoleRef); await runR({ code, consoleRef, onStatus, onData }); }, [consoleRef, onData, onStatus], diff --git a/gui/src/app/Scripting/DataGeneration/useDataGenState.ts b/gui/src/app/Scripting/DataGeneration/useDataGenState.ts index c9357dfb..892d8597 100644 --- a/gui/src/app/Scripting/DataGeneration/useDataGenState.ts +++ b/gui/src/app/Scripting/DataGeneration/useDataGenState.ts @@ -1,6 +1,6 @@ import { useCallback, useContext, useRef, useState } from "react"; import { ProjectKnownFiles } from "@SpCore/ProjectDataModel"; -import { writeConsoleOutToDiv } from "@SpScripting/ScriptEditor"; +import { writeConsoleOutToDiv } from "@SpScripting/OutputDivUtils"; import { InterpreterStatus } from "@SpScripting/InterpreterTypes"; import { ProjectContext } from "@SpCore/ProjectContextProvider"; diff --git a/gui/src/app/Scripting/OutputDivUtils.tsx b/gui/src/app/Scripting/OutputDivUtils.tsx new file mode 100644 index 00000000..11558a91 --- /dev/null +++ b/gui/src/app/Scripting/OutputDivUtils.tsx @@ -0,0 +1,25 @@ +import { RefObject } from "react"; + +type ConsoleOutType = "stdout" | "stderr"; + +export const writeConsoleOutToDiv = ( + parentDiv: RefObject, + x: string, + type: ConsoleOutType, +) => { + if (x === "") return; + if (!parentDiv.current) return; + const styleClass = type === "stdout" ? "WorkerStdout" : "WorkerStderr"; + const preElement = document.createElement("pre"); + preElement.textContent = x; + const divElement = document.createElement("div"); + divElement.className = styleClass; + divElement.appendChild(preElement); + parentDiv.current.appendChild(divElement); +}; + +export const clearOutputDivs = (...parentDiv: RefObject[]) => { + for (const div of parentDiv) { + if (div.current) div.current.innerHTML = ""; + } +}; diff --git a/gui/src/app/Scripting/ScriptEditor.tsx b/gui/src/app/Scripting/ScriptEditor.tsx index 2a2489a8..97ec153f 100644 --- a/gui/src/app/Scripting/ScriptEditor.tsx +++ b/gui/src/app/Scripting/ScriptEditor.tsx @@ -184,22 +184,4 @@ const ConsoleOutputWindow: FunctionComponent = ({ return
; }; -type ConsoleOutType = "stdout" | "stderr"; - -export const writeConsoleOutToDiv = ( - parentDiv: RefObject, - x: string, - type: ConsoleOutType, -) => { - if (x === "") return; - if (!parentDiv.current) return; - const styleClass = type === "stdout" ? "WorkerStdout" : "WorkerStderr"; - const preElement = document.createElement("pre"); - preElement.textContent = x; - const divElement = document.createElement("div"); - divElement.className = styleClass; - divElement.appendChild(preElement); - parentDiv.current.appendChild(divElement); -}; - export default ScriptEditor; diff --git a/gui/src/app/Scripting/webR/runR.ts b/gui/src/app/Scripting/webR/runR.ts index d712850e..9d56ee87 100644 --- a/gui/src/app/Scripting/webR/runR.ts +++ b/gui/src/app/Scripting/webR/runR.ts @@ -1,7 +1,7 @@ import { RefObject } from "react"; import { RString, WebR } from "webr"; import { InterpreterStatus } from "@SpScripting/InterpreterTypes"; -import { writeConsoleOutToDiv } from "@SpScripting/ScriptEditor"; +import { writeConsoleOutToDiv } from "@SpScripting/OutputDivUtils"; let webR: WebR | null = null; export const loadWebRInstance = async (