Support output tabs in pyodide (#1157)

Author: loiswells97

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Added
+
+- Support for the `outputPanels` attribute in the `PyodideRunner` (#1157)
+
 ## [0.28.14] - 2025-01-06
 
 ### Fixed

src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx

@@ -31,7 +31,7 @@ const getWorkerURL = (url) => {
   return URL.createObjectURL(blob);
 };
 
-const PyodideRunner = ({ active }) => {
+const PyodideRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const [pyodideWorker, setPyodideWorker] = useState(null);
 
   useEffect(() => {
@@ -65,6 +65,9 @@ const PyodideRunner = ({ active }) => {
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const senseHatAlways = useSelector((s) => s.editor.senseHatAlwaysEnabled);
   const queryParams = new URLSearchParams(window.location.search);
+  const singleOutputPanel = outputPanels.length === 1;
+  const showVisualOutputPanel = outputPanels.includes("visual");
+  const showTextOutputPanel = outputPanels.includes("text");
   const showVisualTab = queryParams.get("show_visual_tab") === "true";
   const [hasVisual, setHasVisual] = useState(showVisualTab || senseHatAlways);
   const [visuals, setVisuals] = useState([]);
@@ -195,8 +198,10 @@ const PyodideRunner = ({ active }) => {
   };
 
   const handleVisual = (origin, content) => {
-    setHasVisual(true);
-    setVisuals((array) => [...array, { origin, content }]);
+    if (showVisualOutputPanel) {
+      setHasVisual(true);
+      setVisuals((array) => [...array, { origin, content }]);
+    }
   };
 
   const handleSenseHatEvent = (type) => {
@@ -326,12 +331,16 @@ const PyodideRunner = ({ active }) => {
         "pyodiderunner--active": active,
       })}
     >
-      {isSplitView ? (
+      {isSplitView || singleOutputPanel ? (
         <>
-          {hasVisual && (
+          {hasVisual && showVisualOutputPanel && (
             <div className="output-panel output-panel--visual">
               <Tabs forceRenderTabPanel={true}>
-                <div className="react-tabs__tab-container">
+                <div
+                  className={classNames("react-tabs__tab-container", {
+                    "react-tabs__tab-container--hidden": singleOutputPanel,
+                  })}
+                >
                   <TabList>
                     <Tab key={0}>
                       <span className="react-tabs__tab-text">
@@ -348,30 +357,36 @@ const PyodideRunner = ({ active }) => {
               </Tabs>
             </div>
           )}
-          <div className="output-panel output-panel--text">
-            <Tabs forceRenderTabPanel={true}>
-              <div className="react-tabs__tab-container">
-                <TabList>
-                  <Tab key={0}>
-                    <span className="react-tabs__tab-text">
-                      {t("output.textOutput")}
-                    </span>
-                  </Tab>
-                </TabList>
-                {!hasVisual && !isEmbedded && isMobile && (
-                  <RunnerControls skinny />
-                )}
-              </div>
-              <ErrorMessage />
-              <TabPanel key={0}>
-                <pre
-                  className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
-                  onClick={shiftFocusToInput}
-                  ref={output}
-                ></pre>
-              </TabPanel>
-            </Tabs>
-          </div>
+          {showTextOutputPanel && (
+            <div className="output-panel output-panel--text">
+              <Tabs forceRenderTabPanel={true}>
+                <div
+                  className={classNames("react-tabs__tab-container", {
+                    "react-tabs__tab-container--hidden": singleOutputPanel,
+                  })}
+                >
+                  <TabList>
+                    <Tab key={0}>
+                      <span className="react-tabs__tab-text">
+                        {t("output.textOutput")}
+                      </span>
+                    </Tab>
+                  </TabList>
+                  {!hasVisual && !isEmbedded && isMobile && (
+                    <RunnerControls skinny />
+                  )}
+                </div>
+                <ErrorMessage />
+                <TabPanel key={0}>
+                  <pre
+                    className={`pythonrunner-console pythonrunner-console--${settings.fontSize}`}
+                    onClick={shiftFocusToInput}
+                    ref={output}
+                  ></pre>
+                </TabPanel>
+              </Tabs>
+            </div>
+          )}
         </>
       ) : (
         <Tabs forceRenderTabPanel={true} defaultIndex={hasVisual ? 0 : 1}>

src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js

@@ -17,6 +17,7 @@ import {
   setProject,
   setLoadedRunner,
   stopCodeRun,
+  setSenseHatAlwaysEnabled,
 } from "../../../../../redux/EditorSlice.js";
 import store from "../../../../../app/store";
 
@@ -26,7 +27,11 @@ global.fetch = jest.fn();
 const project = {
   components: [
     { name: "a", extension: "py", content: "print('a')" },
-    { name: "main", extension: "py", content: "print('hello')" },
+    {
+      name: "main",
+      extension: "py",
+      content: "print('hello')",
+    },
   ],
   image_list: [
     { filename: "image1.jpg", url: "http://example.com/image1.jpg" },
@@ -368,3 +373,45 @@ describe("When not active and code run triggered", () => {
     expect(postMessage).not.toHaveBeenCalled();
   });
 });
+
+describe("When there is visual output", () => {
+  beforeEach(() => {
+    act(() => {
+      store.dispatch(setSenseHatAlwaysEnabled(true));
+    });
+  });
+
+  test("displays both text and visual tabs by default", () => {
+    render(
+      <Provider store={store}>
+        <PyodideRunner />
+      </Provider>,
+    );
+    expect(screen.queryByText("output.textOutput")).toBeInTheDocument();
+    expect(screen.queryByText("output.visualOutput")).toBeInTheDocument();
+  });
+
+  test("only displays text tab when outputPanels is set to just text", () => {
+    render(
+      <Provider store={store}>
+        <PyodideRunner outputPanels={["text"]} />
+      </Provider>,
+    );
+    expect(screen.queryByText("output.textOutput")).toBeInTheDocument();
+    expect(screen.queryByText("output.visualOutput")).not.toBeInTheDocument();
+  });
+
+  test("only displays visual tab when outputPanels is set to just visual", () => {
+    render(
+      <Provider store={store}>
+        <PyodideRunner outputPanels={["visual"]} />
+      </Provider>,
+    );
+    expect(screen.queryByText("output.textOutput")).not.toBeInTheDocument();
+    expect(screen.queryByText("output.visualOutput")).toBeInTheDocument();
+  });
+
+  afterEach(() => {
+    store.dispatch(setSenseHatAlwaysEnabled(false));
+  });
+});

src/components/Editor/Runners/PythonRunner/PythonRunner.jsx

@@ -92,7 +92,10 @@ const PythonRunner = ({ outputPanels = ["text", "visual"] }) => {
   }, [project, codeRunTriggered, senseHatAlwaysEnabled, skulptFallback, t]);
   return (
     <>
-      <PyodideRunner active={activeRunner === "pyodide"} />
+      <PyodideRunner
+        active={activeRunner === "pyodide"}
+        outputPanels={outputPanels}
+      />
       <SkulptRunner
         active={activeRunner === "skulpt"}
         outputPanels={outputPanels}