Pull out clearing innerHTML

flatironinstitute · Jul 26, 2024 · afeec3c · afeec3c
1 parent 8779e91
commit afeec3c
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 46 deletions.
diff --git 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<AnalysisWindowProps> = ({
 
   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
@@ -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<AnalysisWindowProps> = ({
 
   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
@@ -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<HTMLDivElement | null>(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
@@ -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<Props> = () => {
 
   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
@@ -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<Props> = () => {
 
   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
@@ -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
@@ -0,0 +1,25 @@
+import { RefObject } from "react";
+
+type ConsoleOutType = "stdout" | "stderr";
+
+export const writeConsoleOutToDiv = (
+  parentDiv: RefObject<HTMLDivElement>,
+  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<HTMLDivElement>[]) => {
+  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
@@ -184,22 +184,4 @@ const ConsoleOutputWindow: FunctionComponent<ConsoleOutputWindowProps> = ({
   return <div className="ConsoleOutputArea" ref={consoleRef} />;
 };
 
-type ConsoleOutType = "stdout" | "stderr";
-
-export const writeConsoleOutToDiv = (
-  parentDiv: RefObject<HTMLDivElement>,
-  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
@@ -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 (