From f1e3d5cf4f35b065e4c1021284e22e6e4c730f07 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Mon, 23 Jun 2025 14:55:13 +0800
Subject: [PATCH] Clean up some tabs

---
 src/tabs/Csg/src/index.tsx       |  6 ++--
 src/tabs/Curve/src/index.tsx     |  6 ++--
 src/tabs/Game/src/index.tsx      | 52 +++++++++++++-------------------
 src/tabs/MarkSweep/src/index.tsx |  9 +++---
 src/tabs/Nbody/index.tsx         |  8 ++---
 src/tabs/Painter/index.tsx       |  5 ++-
 src/tabs/Pixnflix/index.tsx      |  5 ++-
 src/tabs/Plotly/index.tsx        |  5 ++-
 src/tabs/Repeat/index.tsx        | 14 ++-------
 src/tabs/Repl/index.tsx          |  2 +-
 src/tabs/Sound/index.tsx         |  6 ++--
 11 files changed, 45 insertions(+), 73 deletions(-)

diff --git a/src/tabs/Csg/src/index.tsx b/src/tabs/Csg/src/index.tsx
index 29ba5cd40..6597da1cd 100644
--- a/src/tabs/Csg/src/index.tsx
+++ b/src/tabs/Csg/src/index.tsx
@@ -3,14 +3,12 @@ import { IconNames } from '@blueprintjs/icons';
 import { Core } from '@sourceacademy/bundle-csg/core';
 import type { CsgModuleState } from '@sourceacademy/bundle-csg/utilities';
 import { defineTab } from '@sourceacademy/modules-lib/tabs/utils';
-import type { DebuggerContext } from '@sourceacademy/modules-lib/types';
-import type { ReactElement } from 'react';
 import CanvasHolder from './canvas_holder';
 
 /* [Exports] */
 export default defineTab({
   // Called by the frontend to decide whether to spawn the CSG tab
-  toSpawn(debuggerContext: DebuggerContext): boolean {
+  toSpawn(debuggerContext) {
     const moduleState: CsgModuleState = debuggerContext.context.moduleContexts.csg.state;
     // toSpawn() is checked before the frontend calls body() if needed, so we
     // initialise Core for the first time over on the tabs' end here
@@ -20,7 +18,7 @@ export default defineTab({
       .shouldRender();
   },
   // Called by the frontend to know what to render in the CSG tab
-  body(_debuggerContext: DebuggerContext): ReactElement {
+  body() {
     return (
       <CanvasHolder
         componentNumber={Core.nextComponent()}
diff --git a/src/tabs/Curve/src/index.tsx b/src/tabs/Curve/src/index.tsx
index a3129857d..66da1f2ff 100644
--- a/src/tabs/Curve/src/index.tsx
+++ b/src/tabs/Curve/src/index.tsx
@@ -4,7 +4,7 @@ import AnimationCanvas from '@sourceacademy/modules-lib/tabs/AnimationCanvas';
 import MultiItemDisplay from '@sourceacademy/modules-lib/tabs/MultItemDisplay';
 import WebGLCanvas from '@sourceacademy/modules-lib/tabs/WebglCanvas';
 import { defineTab, getModuleState } from '@sourceacademy/modules-lib/tabs/utils';
-import { glAnimation, type DebuggerContext, type ModuleTab } from '@sourceacademy/modules-lib/types';
+import { glAnimation, type ModuleTab } from '@sourceacademy/modules-lib/types';
 import Curve3DAnimationCanvas from './animation_canvas_3d_curve';
 import CurveCanvas3D from './canvas_3d_curve';
 
@@ -43,11 +43,11 @@ export const CurveTab: ModuleTab = ({ context }) => {
 };
 
 export default defineTab({
-  toSpawn(context: DebuggerContext) {
+  toSpawn(context) {
     const drawnCurves = context.context?.moduleContexts?.curve?.state?.drawnCurves;
     return drawnCurves.length > 0;
   },
-  body(context: DebuggerContext) {
+  body(context) {
     return <CurveTab context={context} />;
   },
   label: 'Curves Tab',
diff --git a/src/tabs/Game/src/index.tsx b/src/tabs/Game/src/index.tsx
index e2b3a0281..aadc8dd09 100644
--- a/src/tabs/Game/src/index.tsx
+++ b/src/tabs/Game/src/index.tsx
@@ -2,41 +2,31 @@ import { defineTab } from '@sourceacademy/modules-lib/tabs/utils';
 import React from 'react';
 import { Links } from './constants';
 
-type Props = {
-  children?: never;
-  className?: string;
-  debuggerContext?: any;
+const Game: React.FC = () => {
+  return <div>
+    Info: You need to visit the game to see the effect of your program.
+    Remember to save your work first!
+    <br />
+    <br />
+    You may find the game module{' '}
+    <a
+      href={Links.gameAPIDocumentation}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      documentation{' '}
+    </a>
+    and{' '}
+    <a href={Links.gameUserGuide} rel="noopener noreferrer" target="_blank">
+      user guide{' '}
+    </a>
+    useful.
+  </div>;
 };
 
-class Game extends React.PureComponent<Props> {
-  public render() {
-    return (
-      <div>
-        Info: You need to visit the game to see the effect of your program.
-        Remember to save your work first!
-        <br />
-        <br />
-        You may find the game module{' '}
-        <a
-          href={Links.gameAPIDocumentation}
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          documentation{' '}
-        </a>
-        and{' '}
-        <a href={Links.gameUserGuide} rel="noopener noreferrer" target="_blank">
-          user guide{' '}
-        </a>
-        useful.
-      </div>
-    );
-  }
-}
-
 export default defineTab({
   toSpawn: () => true,
-  body: (debuggerContext: any) => <Game debuggerContext={debuggerContext} />,
+  body: () => <Game />,
   label: 'Game Info Tab',
   iconName: 'info-sign'
 });
diff --git a/src/tabs/MarkSweep/src/index.tsx b/src/tabs/MarkSweep/src/index.tsx
index d78adbdcd..65a01ce30 100644
--- a/src/tabs/MarkSweep/src/index.tsx
+++ b/src/tabs/MarkSweep/src/index.tsx
@@ -1,12 +1,11 @@
-import { Slider, Icon } from '@blueprintjs/core';
+import { Icon, Slider } from '@blueprintjs/core';
 import { defineTab } from '@sourceacademy/modules-lib/tabs/utils';
+import type { DebuggerContext } from '@sourceacademy/modules-lib/types/index';
 import React from 'react';
 import { ThemeColor } from './style';
 
 type Props = {
-  children?: never;
-  className?: string;
-  debuggerContext: any;
+  debuggerContext: DebuggerContext;
 };
 
 type State = {
@@ -466,7 +465,7 @@ class MarkSweep extends React.Component<Props, State> {
 
 export default defineTab({
   toSpawn: () => true,
-  body: (debuggerContext: any) => (
+  body: (debuggerContext) => (
     <MarkSweep debuggerContext={debuggerContext} />
   ),
   label: 'Mark Sweep Garbage Collector',
diff --git a/src/tabs/Nbody/index.tsx b/src/tabs/Nbody/index.tsx
index 7f1f9df90..45519bf14 100644
--- a/src/tabs/Nbody/index.tsx
+++ b/src/tabs/Nbody/index.tsx
@@ -1,6 +1,7 @@
 import { Button, ButtonGroup, NumericInput } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { defineTab } from '@sourceacademy/modules-lib/tabs/utils';
+import type { DebuggerContext } from '@sourceacademy/modules-lib/types/index';
 import type { Simulation } from 'nbody';
 import React from 'react';
 
@@ -13,9 +14,7 @@ import React from 'react';
  * React Component props for the Tab.
  */
 type Props = {
-  children?: never;
-  className?: never;
-  context?: any;
+  context: DebuggerContext;
 };
 
 /**
@@ -27,9 +26,6 @@ type State = {};
  * React component props for the control buttons.
  */
 type SimControlProps = {
-  children?: never;
-  className?: never;
-  context?: any;
   sim: Simulation;
 };
 
diff --git a/src/tabs/Painter/index.tsx b/src/tabs/Painter/index.tsx
index 7c5235d86..f8091d891 100644
--- a/src/tabs/Painter/index.tsx
+++ b/src/tabs/Painter/index.tsx
@@ -1,12 +1,11 @@
 import type { LinePlot } from '@sourceacademy/bundle-painter/painter';
 import Modal from '@sourceacademy/modules-lib/tabs/ModalDiv';
 import { defineTab } from '@sourceacademy/modules-lib/tabs/utils';
+import type { DebuggerContext } from '@sourceacademy/modules-lib/types/index';
 import React from 'react';
 
 type Props = {
-  children?: never
-  className?: string
-  debuggerContext: any
+  debuggerContext: DebuggerContext
 };
 
 type State = {
diff --git a/src/tabs/Pixnflix/index.tsx b/src/tabs/Pixnflix/index.tsx
index fa2828f49..b23b94706 100644
--- a/src/tabs/Pixnflix/index.tsx
+++ b/src/tabs/Pixnflix/index.tsx
@@ -19,12 +19,11 @@ import {
   type TabsPacket
 } from '@sourceacademy/bundle-pix_n_flix/types';
 import { defineTab } from '@sourceacademy/modules-lib/tabs/utils';
+import type { DebuggerContext } from '@sourceacademy/modules-lib/types/index';
 import React, { type ChangeEvent, type DragEvent } from 'react';
 
 type Props = {
-  children?: never;
-  className?: string;
-  debuggerContext: any;
+  debuggerContext: DebuggerContext;
 };
 
 enum VideoMode {
diff --git a/src/tabs/Plotly/index.tsx b/src/tabs/Plotly/index.tsx
index 5d8bee4f5..9c893595d 100644
--- a/src/tabs/Plotly/index.tsx
+++ b/src/tabs/Plotly/index.tsx
@@ -1,12 +1,11 @@
 import type { DrawnPlot } from '@sourceacademy/bundle-plotly/plotly';
 import Modal from '@sourceacademy/modules-lib/tabs/ModalDiv';
 import { defineTab } from '@sourceacademy/modules-lib/tabs/utils';
+import type { DebuggerContext } from '@sourceacademy/modules-lib/types/index';
 import React from 'react';
 
 type Props = {
-  children?: never
-  className?: string
-  debuggerContext: any
+  debuggerContext: DebuggerContext
 };
 
 type State = {
diff --git a/src/tabs/Repeat/index.tsx b/src/tabs/Repeat/index.tsx
index 668447c47..2eaae9747 100644
--- a/src/tabs/Repeat/index.tsx
+++ b/src/tabs/Repeat/index.tsx
@@ -1,21 +1,13 @@
 import { defineTab } from '@sourceacademy/modules-lib/tabs/utils';
 import React from 'react';
 
-type Props = {
-  children?: never;
-  className?: string;
-  debuggerContext?: any;
+const Repeat: React.FC = () => {
+  return <div>This is spawned from the repeat package</div>;
 };
 
-class Repeat extends React.PureComponent<Props> {
-  public render() {
-    return <div>This is spawned from the repeat package</div>;
-  }
-}
-
 export default defineTab({
   toSpawn: () => true,
-  body: (debuggerContext: any) => <Repeat debuggerContext={debuggerContext} />,
+  body: () => <Repeat />,
   label: 'Repeat Test Tab',
   iconName: 'build'
 });
diff --git a/src/tabs/Repl/index.tsx b/src/tabs/Repl/index.tsx
index 58a3f4bdd..2ac59a395 100644
--- a/src/tabs/Repl/index.tsx
+++ b/src/tabs/Repl/index.tsx
@@ -13,9 +13,9 @@ import { defineTab } from '@sourceacademy/modules-lib/tabs/utils';
 import React from 'react';
 import AceEditor from 'react-ace';
 
+import 'ace-builds/src-noconflict/ext-language_tools';
 import 'ace-builds/src-noconflict/mode-javascript';
 import 'ace-builds/src-noconflict/theme-twilight';
-import 'ace-builds/src-noconflict/ext-language_tools';
 
 type Props = {
   programmableReplInstance: ProgrammableRepl;
diff --git a/src/tabs/Sound/index.tsx b/src/tabs/Sound/index.tsx
index 7b28a3548..c4be6e46b 100644
--- a/src/tabs/Sound/index.tsx
+++ b/src/tabs/Sound/index.tsx
@@ -1,7 +1,7 @@
 import type { SoundModuleState } from '@sourceacademy/bundle-sound/types';
 import MultiItemDisplay from '@sourceacademy/modules-lib/tabs/MultItemDisplay';
 import { defineTab, getModuleState } from '@sourceacademy/modules-lib/tabs/utils';
-import type { DebuggerContext, ModuleTab } from '@sourceacademy/modules-lib/types';
+import type { ModuleTab } from '@sourceacademy/modules-lib/types';
 
 /**
  * Tab for Source Academy Sounds Module
@@ -35,11 +35,11 @@ const SoundTab: ModuleTab = ({ context }) => {
 };
 
 export default defineTab({
-  toSpawn(context: DebuggerContext) {
+  toSpawn(context) {
     const audioPlayed = context.context?.moduleContexts?.sound?.state?.audioPlayed;
     return audioPlayed.length > 0;
   },
-  body(context: DebuggerContext) {
+  body(context) {
     return <SoundTab context={context} />;
   },
   label: 'Sounds',