From 2437ca6720dc9c3624b69e9abf380100d98f86ed Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Fri, 10 Mar 2023 21:40:21 +0800
Subject: [PATCH] Move to functional components (Part IV) (#2353)

* Use FC for EditingOverviewCard

* Use FC for MissionCreator

* Use FC for EditingWorkspaceSideContentDeploymentTab

* Reformat code and comments

* Use FC for SourceRecorderShareCell

* Use FC for SourceRecorderSelectCell

* Use FC for SideContentToneMatrix

* Use FC for SideContentCanvasOutput

* Fix incorrect memoization

* Standardise Drawable export/imports

* Use FC for BackwardArrowDrawable

* Improve comment formatting

* Add back memoization

* Use FC for ArrowDrawable

---------

Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>
---
 .../EditingOverviewCard.tsx                   | 180 ++++++++----------
 ...itingWorkspaceSideContentDeploymentTab.tsx | 172 ++++++++---------
 src/commons/missionCreator/MissionCreator.tsx |  97 ++++------
 .../sideContent/SideContentCanvasOutput.tsx   |  21 +-
 .../sideContent/SideContentToneMatrix.tsx     |  60 +++---
 .../SourceRecorderSelectCell.tsx              |  37 ++--
 .../SourceRecorderShareCell.tsx               |  83 ++++----
 .../dataVisualizer/drawable/ArrayDrawable.tsx |   6 +-
 .../dataVisualizer/drawable/ArrowDrawable.tsx |  42 ++--
 .../drawable/BackwardArrowDrawable.tsx        |  85 +++++----
 .../dataVisualizer/drawable/Drawable.ts       |   9 +-
 .../drawable/FunctionDrawable.tsx             |   4 +-
 .../dataVisualizer/drawable/NullDrawable.tsx  |   4 +-
 src/features/dataVisualizer/tree/Tree.tsx     |   3 +-
 14 files changed, 360 insertions(+), 443 deletions(-)

diff --git a/src/commons/editingOverviewCard/EditingOverviewCard.tsx b/src/commons/editingOverviewCard/EditingOverviewCard.tsx
index 93455b7e29..6158efc3c0 100644
--- a/src/commons/editingOverviewCard/EditingOverviewCard.tsx
+++ b/src/commons/editingOverviewCard/EditingOverviewCard.tsx
@@ -14,7 +14,7 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { ItemRenderer, Select } from '@blueprintjs/select';
-import * as React from 'react';
+import React, { useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import Textarea from 'react-textarea-autosize';
 
@@ -38,85 +38,57 @@ type StateProps = {
   assessmentTypes: AssessmentType[];
 };
 
-type State = {
-  editingOverviewField: string;
-  fieldValue: any;
-  showOptionsOverlay: boolean;
-};
-
-export class EditingOverviewCard extends React.Component<EditingOverviewCardProps, State> {
-  public constructor(props: EditingOverviewCardProps) {
-    super(props);
-    this.state = {
-      editingOverviewField: '',
-      fieldValue: '',
-      showOptionsOverlay: false
-    };
-  }
-
-  public render() {
-    return (
-      <div>
-        {this.optionsOverlay()}
-        {this.makeEditingOverviewCard(this.props.overview)}
-      </div>
-    );
-  }
+export const EditingOverviewCard: React.FC<EditingOverviewCardProps> = props => {
+  const [editingOverviewField, setEditingOverviewField] = useState('');
+  const [fieldValue, setFieldValue] = useState<any>('');
+  const [showOptionsOverlay, setShowOptionsOverlay] = useState(false);
 
-  private saveEditOverview = (field: keyof AssessmentOverview) => (e: any) => {
+  const saveEditOverview = (field: keyof AssessmentOverview) => (e: any) => {
     const overview = {
-      ...this.props.overview,
-      [field]: this.state.fieldValue
+      ...props.overview,
+      [field]: fieldValue
     };
-    this.setState({
-      editingOverviewField: '',
-      fieldValue: ''
-    });
+    setEditingOverviewField('');
+    setFieldValue('');
     storeLocalAssessmentOverview(overview);
-    this.props.updateEditingOverview(overview);
+    props.updateEditingOverview(overview);
   };
 
-  private handleEditOverview = () => (e: any) => {
-    this.setState({
-      fieldValue: e.target.value
-    });
+  const handleEditOverview = (e: any) => {
+    setFieldValue(e.target.value);
   };
 
-  private toggleEditField = (field: keyof AssessmentOverview) => (e: any) => {
-    if (this.state.editingOverviewField !== field) {
-      this.setState({
-        editingOverviewField: field,
-        fieldValue: this.props.overview[field]
-      });
+  const toggleEditField = (field: keyof AssessmentOverview) => (e: any) => {
+    if (editingOverviewField !== field) {
+      setEditingOverviewField(field);
+      setFieldValue(props.overview[field]);
     }
   };
 
-  private toggleOptionsOverlay = () => {
-    this.setState({
-      showOptionsOverlay: !this.state.showOptionsOverlay
-    });
+  const toggleOptionsOverlay = () => {
+    setShowOptionsOverlay(!showOptionsOverlay);
   };
 
-  private handleExportXml = (e: any) => {
+  const handleExportXml = (e: any) => {
     exportXml();
   };
 
-  private makeEditingOverviewTextarea = (field: keyof AssessmentOverview) => (
+  const makeEditingOverviewTextarea = (field: keyof AssessmentOverview) => (
     <Textarea
       autoFocus={true}
       className={'editing-textarea'}
-      onChange={this.handleEditOverview()}
-      onBlur={this.saveEditOverview(field)}
-      value={this.state.fieldValue}
+      onChange={handleEditOverview}
+      onBlur={saveEditOverview(field)}
+      value={fieldValue}
     />
   );
 
-  private makeEditingOverviewCard = (overview: AssessmentOverview) => (
+  const makeEditingOverviewCard = (overview: AssessmentOverview) => (
     <div>
       <Card className="row listing" elevation={Elevation.ONE}>
-        <div className="col-xs-3 listing-picture" onClick={this.toggleEditField('coverImage')}>
-          {this.state.editingOverviewField === 'coverImage' ? (
-            this.makeEditingOverviewTextarea('coverImage')
+        <div className="col-xs-3 listing-picture" onClick={toggleEditField('coverImage')}>
+          {editingOverviewField === 'coverImage' ? (
+            makeEditingOverviewTextarea('coverImage')
           ) : (
             <img
               alt="Assessment cover"
@@ -127,13 +99,13 @@ export class EditingOverviewCard extends React.Component<EditingOverviewCardProp
         </div>
 
         <div className="col-xs-9 listing-text">
-          {this.makeEditingOverviewCardTitle(overview, overview.title)}
+          {makeEditingOverviewCardTitle(overview, overview.title)}
           <div className="row listing-xp">
             <H6> {`Max XP: ${overview.maxXp}`} </H6>
           </div>
-          <div className="row listing-description" onClick={this.toggleEditField('shortSummary')}>
-            {this.state.editingOverviewField === 'shortSummary' ? (
-              this.makeEditingOverviewTextarea('shortSummary')
+          <div className="row listing-description" onClick={toggleEditField('shortSummary')}>
+            {editingOverviewField === 'shortSummary' ? (
+              makeEditingOverviewTextarea('shortSummary')
             ) : (
               <Markdown content={createPlaceholder(overview.shortSummary)} />
             )}
@@ -142,26 +114,24 @@ export class EditingOverviewCard extends React.Component<EditingOverviewCardProp
             <Text className="listing-due-date">
               <Icon className="listing-due-icon" iconSize={12} icon={IconNames.TIME} />
               <div className="date-container">Opens at:&nbsp;</div>
-              <div className="date-container" onClick={this.toggleEditField('openAt')}>
-                {this.state.editingOverviewField === 'openAt'
-                  ? this.makeEditingOverviewTextarea('openAt')
+              <div className="date-container" onClick={toggleEditField('openAt')}>
+                {editingOverviewField === 'openAt'
+                  ? makeEditingOverviewTextarea('openAt')
                   : `${getPrettyDate(overview.openAt)}`}
               </div>
 
               <div className="date-container">&nbsp;&nbsp;Due:&nbsp;</div>
-              <div className="date-container" onClick={this.toggleEditField('closeAt')}>
-                {this.state.editingOverviewField === 'closeAt'
-                  ? this.makeEditingOverviewTextarea('closeAt')
+              <div className="date-container" onClick={toggleEditField('closeAt')}>
+                {editingOverviewField === 'closeAt'
+                  ? makeEditingOverviewTextarea('closeAt')
                   : `${getPrettyDate(overview.closeAt)}`}
               </div>
             </Text>
-            <Button icon={IconNames.WRENCH} minimal={true} onClick={this.toggleOptionsOverlay}>
+            <Button icon={IconNames.WRENCH} minimal={true} onClick={toggleOptionsOverlay}>
               Other Options
             </Button>
             <NavLink
-              to={`${this.props.listingPath}/${overview.id.toString()}/${
-                Constants.defaultQuestionId
-              }`}
+              to={`${props.listingPath}/${overview.id.toString()}/${Constants.defaultQuestionId}`}
             >
               <ControlButton label="Edit mission" icon={IconNames.EDIT} />
             </NavLink>
@@ -171,82 +141,77 @@ export class EditingOverviewCard extends React.Component<EditingOverviewCardProp
     </div>
   );
 
-  private makeEditingOverviewCardTitle = (overview: AssessmentOverview, title: string) => (
+  const makeEditingOverviewCardTitle = (overview: AssessmentOverview, title: string) => (
     <div className="row listing-title">
       <Text ellipsize={true} className={'col-xs-10'}>
-        <H4 onClick={this.toggleEditField('title')}>
-          {this.state.editingOverviewField === 'title'
-            ? this.makeEditingOverviewTextarea('title')
+        <H4 onClick={toggleEditField('title')}>
+          {editingOverviewField === 'title'
+            ? makeEditingOverviewTextarea('title')
             : createPlaceholder(title)}
         </H4>
       </Text>
-      <div className="col-xs-2">{this.makeExportButton(overview)}</div>
+      <div className="col-xs-2">{makeExportButton(overview)}</div>
     </div>
   );
 
-  private makeExportButton = (overview: AssessmentOverview) => (
-    <Button
-      icon={IconNames.EXPORT}
-      intent={Intent.DANGER}
-      minimal={true}
-      onClick={this.handleExportXml}
-    >
+  const makeExportButton = (overview: AssessmentOverview) => (
+    <Button icon={IconNames.EXPORT} intent={Intent.DANGER} minimal={true} onClick={handleExportXml}>
       Save as XML
     </Button>
   );
 
-  private saveCategory = (i: AssessmentType, e: any) => {
+  const saveCategory = (i: AssessmentType, e: any) => {
     const overview = {
-      ...this.props.overview,
+      ...props.overview,
       category: i
     };
     storeLocalAssessmentOverview(overview);
-    this.props.updateEditingOverview(overview);
+    props.updateEditingOverview(overview);
   };
 
-  private optionsOverlay = () => (
+  const optionsOverlay = () => (
     <Dialog
       canOutsideClickClose={false}
       className="assessment-reset"
       icon={IconNames.WRENCH}
       isCloseButtonShown={true}
-      isOpen={this.state.showOptionsOverlay}
-      onClose={this.toggleOptionsOverlay}
+      isOpen={showOptionsOverlay}
+      onClose={toggleOptionsOverlay}
       title="Other options"
     >
       <div className={Classes.DIALOG_BODY}>
         <H3>Assessment Type</H3>
-        {this.assessmentTypeSelect(this.props.overview.type, this.saveCategory)}
+        {assessmentTypeSelect(props.overview.type, saveCategory)}
         <H3>Number</H3>
-        <div onClick={this.toggleEditField('number')}>
-          {this.state.editingOverviewField === 'number'
-            ? this.makeEditingOverviewTextarea('number')
-            : createPlaceholder(this.props.overview.number || '')}
+        <div onClick={toggleEditField('number')}>
+          {editingOverviewField === 'number'
+            ? makeEditingOverviewTextarea('number')
+            : createPlaceholder(props.overview.number || '')}
         </div>
         <H3>Story</H3>
-        <div onClick={this.toggleEditField('story')}>
-          {this.state.editingOverviewField === 'story'
-            ? this.makeEditingOverviewTextarea('story')
-            : createPlaceholder(this.props.overview.story || '')}
+        <div onClick={toggleEditField('story')}>
+          {editingOverviewField === 'story'
+            ? makeEditingOverviewTextarea('story')
+            : createPlaceholder(props.overview.story || '')}
         </div>
         <br />
         <H3>Filename</H3>
-        <div onClick={this.toggleEditField('fileName')}>
-          {this.state.editingOverviewField === 'fileName'
-            ? this.makeEditingOverviewTextarea('fileName')
-            : createPlaceholder(this.props.overview.fileName || '')}
+        <div onClick={toggleEditField('fileName')}>
+          {editingOverviewField === 'fileName'
+            ? makeEditingOverviewTextarea('fileName')
+            : createPlaceholder(props.overview.fileName || '')}
         </div>
       </div>
     </Dialog>
   );
 
-  private assessmentTypeSelect = (
+  const assessmentTypeSelect = (
     assessmentType: AssessmentType,
     handleSelect = (i: AssessmentType, e?: React.SyntheticEvent<HTMLElement>) => {}
   ) => (
     <AssessmentTypeSelectComponent
       className={Classes.MINIMAL}
-      items={this.props.assessmentTypes}
+      items={props.assessmentTypes}
       onItemSelect={handleSelect}
       itemRenderer={assessmentTypeRenderer}
       filterable={false}
@@ -258,7 +223,14 @@ export class EditingOverviewCard extends React.Component<EditingOverviewCardProp
       />
     </AssessmentTypeSelectComponent>
   );
-}
+
+  return (
+    <div>
+      {optionsOverlay()}
+      {makeEditingOverviewCard(props.overview)}
+    </div>
+  );
+};
 
 const createPlaceholder = (str: string): string => {
   if (str.match('^(\n| )*$')) {
diff --git a/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentDeploymentTab.tsx b/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentDeploymentTab.tsx
index 7f6db00154..4485f14789 100644
--- a/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentDeploymentTab.tsx
+++ b/src/commons/editingWorkspaceSideContent/EditingWorkspaceSideContentDeploymentTab.tsx
@@ -2,7 +2,7 @@ import { Button, Classes, Divider, MenuItem, Switch } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { ItemRenderer, Select } from '@blueprintjs/select';
 import { Chapter, Variant } from 'js-slang/dist/types';
-import * as React from 'react';
+import React from 'react';
 
 import { SALanguage, sourceLanguages, styliseSublanguage } from '../application/ApplicationTypes';
 import {
@@ -30,43 +30,16 @@ type StateProps = {
   isOptionalDeployment: boolean;
 };
 
-class DeploymentTab extends React.Component<DeploymentTabProps, {}> {
-  public render() {
-    if (!this.props.isOptionalDeployment) {
-      return (
-        <div>
-          {this.props.label + ' Deployment'}
-          <br />
-          {this.deploymentTab()}
-        </div>
-      );
-    } else {
-      return (
-        <div>
-          <Switch
-            checked={!this.isEmptyLibrary()}
-            label={'Enable ' + this.props.label + ' Deployment'}
-            onChange={this.handleSwitchDeployment}
-          />
-          {this.isEmptyLibrary() ? null : this.deploymentTab()}
-        </div>
-      );
-    }
-  }
-
-  private deploymentTab = () => {
-    const deploymentPath = this.props.pathToLibrary;
-    const deployment = getValueFromPath(deploymentPath, this.props.assessment) as Library;
-    // const deploymentDisp = this.props.isGlobalDeployment ? 'Global Deployment' : 'Local Deployment';
+const DeploymentTab: React.FC<DeploymentTabProps> = props => {
+  const deploymentTab = () => {
+    const deploymentPath = props.pathToLibrary;
+    const deployment = getValueFromPath(deploymentPath, props.assessment) as Library;
+    // const deploymentDisp = props.isGlobalDeployment ? 'Global Deployment' : 'Local Deployment';
     const symbols = deployment.external.symbols.map((symbol, i) => (
       <tr key={i}>
-        <td>{this.textareaContent(deploymentPath.concat(['external', 'symbols', i]))}</td>
+        <td>{textareaContent(deploymentPath.concat(['external', 'symbols', i]))}</td>
         <td style={{ width: '100px' }}>
-          <ControlButton
-            label="Delete"
-            icon={IconNames.MINUS}
-            onClick={this.handleSymbolDelete(i)}
-          />
+          <ControlButton label="Delete" icon={IconNames.MINUS} onClick={handleSymbolDelete(i)} />
         </td>
       </tr>
     ));
@@ -74,15 +47,11 @@ class DeploymentTab extends React.Component<DeploymentTabProps, {}> {
     const globals = deployment.globals.map((symbol, i) => (
       <tr key={i}>
         <td style={{ width: '170px' }}>
-          {this.textareaContent(deploymentPath.concat(['globals', i, 0]))}
+          {textareaContent(deploymentPath.concat(['globals', i, 0]))}
         </td>
-        <td>{this.globalValueTextareaContent(i)}</td>
+        <td>{globalValueTextareaContent(i)}</td>
         <td style={{ width: '90px' }}>
-          <ControlButton
-            label="Delete"
-            icon={IconNames.MINUS}
-            onClick={this.handleGlobalDelete(i)}
-          />
+          <ControlButton label="Delete" icon={IconNames.MINUS} onClick={handleGlobalDelete(i)} />
         </td>
       </tr>
     ));
@@ -91,7 +60,7 @@ class DeploymentTab extends React.Component<DeploymentTabProps, {}> {
       <ControlButton
         label="Use this Library"
         icon={IconNames.REFRESH}
-        onClick={() => this.props.handleRefreshLibrary(deployment)}
+        onClick={() => props.handleRefreshLibrary(deployment)}
       />
     );
 
@@ -99,14 +68,14 @@ class DeploymentTab extends React.Component<DeploymentTabProps, {}> {
       <React.Fragment>
         External Library:
         <br />
-        {externalSelect(deployment.external.name, this.handleExternalSelect!)}
+        {externalSelect(deployment.external.name, handleExternalSelect)}
         <Divider />
         <div>Symbols:</div>
         <br />
         <table style={{ width: '100%' }}>
           <tbody>{symbols}</tbody>
         </table>
-        <ControlButton label="New Symbol" icon={IconNames.PLUS} onClick={this.handleNewSymbol} />
+        <ControlButton label="New Symbol" icon={IconNames.PLUS} onClick={handleNewSymbol} />
       </React.Fragment>
     );
 
@@ -117,7 +86,7 @@ class DeploymentTab extends React.Component<DeploymentTabProps, {}> {
         <table style={{ width: '100%', borderSpacing: '5px' }}>
           <tbody>{globals}</tbody>
         </table>
-        <ControlButton label="New Global" icon={IconNames.PLUS} onClick={this.handleNewGlobal} />
+        <ControlButton label="New Global" icon={IconNames.PLUS} onClick={handleNewGlobal} />
       </React.Fragment>
     );
 
@@ -130,7 +99,7 @@ class DeploymentTab extends React.Component<DeploymentTabProps, {}> {
         <Divider />
         Interpreter:
         <br />
-        {chapterSelect(deployment.chapter, deployment.variant, this.handleChapterSelect)}
+        {chapterSelect(deployment.chapter, deployment.variant, handleChapterSelect)}
         <Divider />
         {symbolsFragment}
         <Divider />
@@ -139,108 +108,129 @@ class DeploymentTab extends React.Component<DeploymentTabProps, {}> {
     );
   };
 
-  private textareaContent = (path: Array<string | number>) => {
+  const textareaContent = (path: Array<string | number>) => {
     return (
       <TextAreaContent
-        assessment={this.props.assessment}
+        assessment={props.assessment}
         path={path}
         processResults={removeSpaces}
-        updateAssessment={this.props.updateAssessment}
+        updateAssessment={props.updateAssessment}
         useRawValue={true}
       />
     );
   };
 
-  private globalValueTextareaContent = (i: number) => {
-    const pathVal = this.props.pathToLibrary.concat(['globals', i, 2]);
+  const globalValueTextareaContent = (i: number) => {
+    const pathVal = props.pathToLibrary.concat(['globals', i, 2]);
     return (
       <TextAreaContent
-        assessment={this.props.assessment}
+        assessment={props.assessment}
         path={pathVal}
-        updateAssessment={this.handleGlobalValueUpdate(i)}
+        updateAssessment={handleGlobalValueUpdate(i)}
         useRawValue={true}
       />
     );
   };
 
-  private handleGlobalValueUpdate = (i: number) => (assessment: Assessment) => {
-    const deployment = getValueFromPath(this.props.pathToLibrary, this.props.assessment) as Library;
+  const handleGlobalValueUpdate = (i: number) => (assessment: Assessment) => {
+    const deployment = getValueFromPath(props.pathToLibrary, props.assessment) as Library;
     const global = deployment.globals[i];
     try {
       global[1] = altEval(global[2]!);
-      this.props.updateAssessment(assessment);
+      props.updateAssessment(assessment);
     } catch (e) {
       global[2] = '"Invalid Expression"';
     }
   };
 
-  private handleSymbolDelete = (index: number) => () => {
-    const assessment = this.props.assessment;
-    const deployment = getValueFromPath(this.props.pathToLibrary, assessment) as Library;
+  const handleSymbolDelete = (index: number) => () => {
+    const assessment = props.assessment;
+    const deployment = getValueFromPath(props.pathToLibrary, assessment) as Library;
     const symbols = deployment.external.symbols;
     symbols.splice(index, 1);
-    this.props.updateAssessment(assessment);
+    props.updateAssessment(assessment);
   };
 
-  private handleNewSymbol = () => {
-    const assessment = this.props.assessment;
-    const deployment = getValueFromPath(this.props.pathToLibrary, assessment) as Library;
+  const handleNewSymbol = () => {
+    const assessment = props.assessment;
+    const deployment = getValueFromPath(props.pathToLibrary, assessment) as Library;
     const symbols = deployment.external.symbols;
     symbols.push('new_symbol');
-    this.props.updateAssessment(assessment);
+    props.updateAssessment(assessment);
   };
 
-  private handleGlobalDelete = (index: number) => () => {
-    const assessment = this.props.assessment;
-    const deployment = getValueFromPath(this.props.pathToLibrary, assessment) as Library;
+  const handleGlobalDelete = (index: number) => () => {
+    const assessment = props.assessment;
+    const deployment = getValueFromPath(props.pathToLibrary, assessment) as Library;
     deployment.globals.splice(index, 1);
-    this.props.updateAssessment(assessment);
+    props.updateAssessment(assessment);
   };
 
-  private handleNewGlobal = () => {
-    const assessment = this.props.assessment;
-    const deployment = getValueFromPath(this.props.pathToLibrary, assessment) as Library;
+  const handleNewGlobal = () => {
+    const assessment = props.assessment;
+    const deployment = getValueFromPath(props.pathToLibrary, assessment) as Library;
     deployment.globals.push(['new_global', null, 'null']);
-    this.props.updateAssessment(assessment);
+    props.updateAssessment(assessment);
   };
 
-  private handleChapterSelect = (i: SALanguage, _e?: React.SyntheticEvent<HTMLElement>) => {
-    const assessment = this.props.assessment;
-    const deployment = getValueFromPath(this.props.pathToLibrary, assessment) as Library;
+  const handleChapterSelect = (i: SALanguage, _e?: React.SyntheticEvent<HTMLElement>) => {
+    const assessment = props.assessment;
+    const deployment = getValueFromPath(props.pathToLibrary, assessment) as Library;
     deployment.chapter = i.chapter;
-    this.props.updateAssessment(assessment);
+    props.updateAssessment(assessment);
   };
 
-  private handleExternalSelect = (i: External, _e?: React.SyntheticEvent<HTMLElement>) => {
-    const assessment = this.props.assessment;
-    const deployment = getValueFromPath(this.props.pathToLibrary, assessment) as Library;
+  const handleExternalSelect = (i: External, _e?: React.SyntheticEvent<HTMLElement>) => {
+    const assessment = props.assessment;
+    const deployment = getValueFromPath(props.pathToLibrary, assessment) as Library;
     deployment.external.name = i.name;
     deployment.external.symbols = JSON.parse(JSON.stringify(externalLibraries.get(i.name)!));
-    this.props.updateAssessment(assessment);
+    props.updateAssessment(assessment);
   };
 
-  private handleSwitchDeployment = () => {
-    const assessment = this.props.assessment;
-    if (this.isEmptyLibrary()) {
+  const handleSwitchDeployment = () => {
+    const assessment = props.assessment;
+    if (isEmptyLibrary()) {
       let library = getValueFromPath(
-        this.props.pathToCopy || ['globalDeployment'],
+        props.pathToCopy || ['globalDeployment'],
         assessment
       ) as Library;
       if (library.chapter === -1) {
         library = assessment.globalDeployment!;
       }
       library = JSON.parse(JSON.stringify(library));
-      assignToPath(this.props.pathToLibrary, library, assessment);
+      assignToPath(props.pathToLibrary, library, assessment);
     } else {
-      assignToPath(this.props.pathToLibrary, emptyLibrary(), assessment);
+      assignToPath(props.pathToLibrary, emptyLibrary(), assessment);
     }
-    this.props.updateAssessment(assessment);
+    props.updateAssessment(assessment);
   };
 
-  private isEmptyLibrary = (path: Array<string | number> = this.props.pathToLibrary) => {
-    return getValueFromPath(path.concat(['chapter']), this.props.assessment) === -1;
+  const isEmptyLibrary = (path: Array<string | number> = props.pathToLibrary) => {
+    return getValueFromPath(path.concat(['chapter']), props.assessment) === -1;
   };
-}
+
+  if (!props.isOptionalDeployment) {
+    return (
+      <div>
+        {props.label + ' Deployment'}
+        <br />
+        {deploymentTab()}
+      </div>
+    );
+  } else {
+    return (
+      <div>
+        <Switch
+          checked={!isEmptyLibrary()}
+          label={'Enable ' + props.label + ' Deployment'}
+          onChange={handleSwitchDeployment}
+        />
+        {isEmptyLibrary() ? null : deploymentTab()}
+      </div>
+    );
+  }
+};
 
 const removeSpaces = (str: string | number) => {
   return typeof str === 'string' ? str.replace(/\s+/g, '') : str;
diff --git a/src/commons/missionCreator/MissionCreator.tsx b/src/commons/missionCreator/MissionCreator.tsx
index d42d986e1c..57250b6bb7 100644
--- a/src/commons/missionCreator/MissionCreator.tsx
+++ b/src/commons/missionCreator/MissionCreator.tsx
@@ -27,97 +27,74 @@ type OwnProps = {
   updateEditingOverview: (overview: AssessmentOverview) => void;
 };
 
-type State = {
-  fileInputText: string;
-};
-
-class MissionCreator extends React.Component<MissionCreatorProps, State> {
-  private fileReader?: FileReader = undefined;
-  public constructor(props: any) {
-    super(props);
-    this.handleFileRead = this.handleFileRead.bind(this);
-    this.handleChangeFile = this.handleChangeFile.bind(this);
-    this.makeMission = this.makeMission.bind(this);
-    this.state = {
-      fileInputText: 'Import XML'
-    };
-  }
+function MissionCreator(props: MissionCreatorProps) {
+  const [fileInputText, setFileInputText] = React.useState('Import XML');
+  let fileReader: FileReader | undefined = undefined;
 
-  public componentDidMount() {
+  React.useEffect(() => {
     const assessment = retrieveLocalAssessment();
     if (assessment) {
-      this.props.newAssessment(assessment);
+      props.newAssessment(assessment);
     }
-  }
-
-  public render() {
-    return (
-      <div>
-        <div>Please ensure that the xml uploaded is trustable.</div>
-        <div>
-          <FileInput
-            text={this.state.fileInputText}
-            inputProps={{ accept: '.xml' }}
-            onChange={this.handleChangeFile}
-          />
-        </div>
-        <div>
-          <ControlButton
-            label="Make New Mission"
-            icon={IconNames.NEW_OBJECT}
-            onClick={this.makeMission}
-          />
-        </div>
-      </div>
-    );
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.newAssessment]);
 
-  private handleFileRead = (file: any) => (e: any) => {
-    if (!this.fileReader) {
+  const handleFileRead = (file: any) => (e: any) => {
+    if (!fileReader) {
       return;
     }
-    const content = this.fileReader.result;
+    const content = fileReader.result;
     if (content) {
       parseString(content, (err: any, result: any) => {
-        // tslint:disable-next-line:no-console
         console.dir(file);
         try {
           const entireAssessment: [AssessmentOverview, Assessment] = makeEntireAssessment(result);
           entireAssessment[0].fileName = file.name.slice(0, -4);
           storeLocalAssessmentOverview(entireAssessment[0]);
-          this.props.updateEditingOverview(entireAssessment[0]);
+          props.updateEditingOverview(entireAssessment[0]);
 
           storeLocalAssessment(entireAssessment[1]);
-          this.props.newAssessment(entireAssessment[1]);
-          this.setState({
-            fileInputText: 'Success!'
-          });
+          props.newAssessment(entireAssessment[1]);
+          setFileInputText('Success!');
         } catch (err) {
-          // tslint:disable-next-line:no-console
           console.log(err);
-          this.setState({
-            fileInputText: 'Invalid XML!'
-          });
+          setFileInputText('Invalid XML!');
         }
       });
     }
   };
 
-  private handleChangeFile = (e: any) => {
+  const handleChangeFile = (e: any) => {
     const files = e.target.files;
     if (e.target.files) {
-      this.fileReader = new FileReader();
-      this.fileReader.onloadend = this.handleFileRead(files[0]);
-      this.fileReader.readAsText(files[0]);
+      fileReader = new FileReader();
+      fileReader.onloadend = handleFileRead(files[0]);
+      fileReader.readAsText(files[0]);
     }
   };
 
-  private makeMission = () => {
+  const makeMission = () => {
     storeLocalAssessmentOverview(overviewTemplate());
-    this.props.updateEditingOverview(overviewTemplate());
+    props.updateEditingOverview(overviewTemplate());
     storeLocalAssessment(assessmentTemplate());
-    this.props.newAssessment(assessmentTemplate());
+    props.newAssessment(assessmentTemplate());
   };
+
+  return (
+    <div>
+      <div>Please ensure that the xml uploaded is trustable.</div>
+      <div>
+        <FileInput
+          text={fileInputText}
+          inputProps={{ accept: '.xml' }}
+          onChange={handleChangeFile}
+        />
+      </div>
+      <div>
+        <ControlButton label="Make New Mission" icon={IconNames.NEW_OBJECT} onClick={makeMission} />
+      </div>
+    </div>
+  );
 }
 
 export default MissionCreator;
diff --git a/src/commons/sideContent/SideContentCanvasOutput.tsx b/src/commons/sideContent/SideContentCanvasOutput.tsx
index 6818c7165c..2b5d356857 100644
--- a/src/commons/sideContent/SideContentCanvasOutput.tsx
+++ b/src/commons/sideContent/SideContentCanvasOutput.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 type SideContentCanvasOutputProps = StateProps;
 
@@ -10,17 +10,16 @@ type StateProps = {
  * Takes the output of the rendered graphics (in a hidden canvas tag under <body>)
  * and makes it into a new <canvas> output for viewing.
  */
-class SideContentCanvasOutput extends React.Component<SideContentCanvasOutputProps, {}> {
-  private $parent: HTMLElement | null = null;
+const SideContentCanvasOutput: React.FC<SideContentCanvasOutputProps> = ({ canvas }) => {
+  const parentRef = useRef<HTMLDivElement>(null);
 
-  public componentDidMount() {
-    this.$parent!.appendChild(this.props.canvas);
-    this.props.canvas.hidden = false;
-  }
+  useEffect(() => {
+    parentRef.current!.appendChild(canvas);
+    canvas.hidden = false;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  public render() {
-    return <div ref={r => (this.$parent = r)} className="canvas-container" />;
-  }
-}
+  return <div ref={parentRef} className="canvas-container" />;
+};
 
 export default SideContentCanvasOutput;
diff --git a/src/commons/sideContent/SideContentToneMatrix.tsx b/src/commons/sideContent/SideContentToneMatrix.tsx
index 898cebea8c..4c4a307d20 100644
--- a/src/commons/sideContent/SideContentToneMatrix.tsx
+++ b/src/commons/sideContent/SideContentToneMatrix.tsx
@@ -1,47 +1,41 @@
 import { Button, Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
-import * as React from 'react';
+import React, { useEffect, useRef } from 'react';
 
-class SideContentToneMatrix extends React.Component<{}, {}> {
-  private $container: HTMLElement | null = null;
+const SideContentToneMatrix: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
-  public shouldComponentUpdate() {
-    return false;
-  }
-
-  public componentDidMount() {
+  useEffect(() => {
     if ((window as any).ToneMatrix) {
-      (window as any).ToneMatrix.initialise_matrix(this.$container!);
+      (window as any).ToneMatrix.initialise_matrix(containerRef.current!);
     }
-  }
+  }, []);
 
-  public handleClear() {
+  const handleClear = () => {
     (window as any).ToneMatrix.clear_matrix();
-  }
+  };
 
-  public handleRandomise() {
+  const handleRandomise = () => {
     (window as any).ToneMatrix.randomise_matrix();
-  }
+  };
 
-  public render() {
-    return (
-      <div className="sa-tone-matrix">
-        <div className="row">
-          <div className={classNames('controls', 'col-xs-12', Classes.DARK, Classes.BUTTON_GROUP)}>
-            <Button id="clear-matrix" onClick={this.handleClear}>
-              Clear
-            </Button>
-            <Button id="randomise-matrix" onClick={this.handleRandomise}>
-              Randomise
-            </Button>
-          </div>
-        </div>
-        <div className="row">
-          <div className="col-xs-12" ref={r => (this.$container = r)} />
+  return (
+    <div className="sa-tone-matrix">
+      <div className="row">
+        <div className={classNames('controls', 'col-xs-12', Classes.DARK, Classes.BUTTON_GROUP)}>
+          <Button id="clear-matrix" onClick={handleClear}>
+            Clear
+          </Button>
+          <Button id="randomise-matrix" onClick={handleRandomise}>
+            Randomise
+          </Button>
         </div>
       </div>
-    );
-  }
-}
+      <div className="row">
+        <div className="col-xs-12" ref={containerRef} />
+      </div>
+    </div>
+  );
+};
 
-export default SideContentToneMatrix;
+export default React.memo(SideContentToneMatrix, () => true);
diff --git a/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx b/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx
index 3a57f1a9ea..7ce1da2e4f 100644
--- a/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx
+++ b/src/commons/sourceRecorder/SourceRecorderSelectCell.tsx
@@ -1,6 +1,6 @@
 import { IconNames } from '@blueprintjs/icons';
 import { Tooltip2 } from '@blueprintjs/popover2';
-import * as React from 'react';
+import React from 'react';
 
 import { PlaybackData, SourcecastData } from '../../features/sourceRecorder/SourceRecorderTypes';
 import ControlButton from '../ControlButton';
@@ -20,27 +20,12 @@ type DispatchProps = {
 type StateProps = {
   data: SourcecastData;
 };
-
-class SourceRecorderSelectCell extends React.Component<SourceRecorderSelectCellProps, {}> {
-  public constructor(props: SourceRecorderSelectCellProps) {
-    super(props);
-  }
-
-  public render() {
-    return (
-      <Tooltip2 content="Load Sourcecast Recording">
-        <ControlButton
-          label={`${this.props.data.title}`}
-          icon={IconNames.PAPERCLIP}
-          onClick={this.handleSelect}
-        />
-      </Tooltip2>
-    );
-  }
-
-  private handleSelect = () => {
-    const { data } = this.props;
-    this.props.handleSetSourcecastData(
+const SourceRecorderSelectCell: React.FC<SourceRecorderSelectCellProps> = ({
+  data,
+  handleSetSourcecastData
+}) => {
+  const handleSelect = () => {
+    handleSetSourcecastData(
       data.title,
       data.description,
       data.uid,
@@ -48,6 +33,12 @@ class SourceRecorderSelectCell extends React.Component<SourceRecorderSelectCellP
       JSON.parse(data.playbackData)
     );
   };
-}
+
+  return (
+    <Tooltip2 content="Load Sourcecast Recording">
+      <ControlButton label={`${data.title}`} icon={IconNames.PAPERCLIP} onClick={handleSelect} />
+    </Tooltip2>
+  );
+};
 
 export default SourceRecorderSelectCell;
diff --git a/src/commons/sourceRecorder/SourceRecorderShareCell.tsx b/src/commons/sourceRecorder/SourceRecorderShareCell.tsx
index dc601de358..6c6afc9ce7 100644
--- a/src/commons/sourceRecorder/SourceRecorderShareCell.tsx
+++ b/src/commons/sourceRecorder/SourceRecorderShareCell.tsx
@@ -1,6 +1,6 @@
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
-import * as React from 'react';
+import React, { useRef, useState } from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 
 import { SourcecastData } from '../../features/sourceRecorder/SourceRecorderTypes';
@@ -13,54 +13,41 @@ type StateProps = {
   courseId?: number;
 };
 
-type State = {
-  shareURL: string;
-};
-
-class SourceRecorderShareCell extends React.Component<SourceRecorderShareCellProps, State> {
-  private shareInputElem: React.RefObject<HTMLInputElement>;
-
-  public constructor(props: SourceRecorderShareCellProps) {
-    super(props);
-    this.shareInputElem = React.createRef();
-    this.selectShareInputText = this.selectShareInputText.bind(this);
-    const url = `${window.location.protocol}//${window.location.host}/courses/${props.courseId}/sourcecast/${props.data.uid}`;
-    this.state = {
-      shareURL: url
-    };
-  }
+const SourceRecorderShareCell: React.FC<SourceRecorderShareCellProps> = props => {
+  const shareInputElem = useRef<HTMLInputElement>(null);
+  const [shareURL] = useState<string>(
+    `${window.location.protocol}//${window.location.host}/courses/${props.courseId}/sourcecast/${props.data.uid}`
+  );
 
-  public render() {
-    const shareButtonPopoverContent = (
-      <div key={this.state.shareURL}>
-        <input defaultValue={this.state.shareURL} readOnly={true} ref={this.shareInputElem} />
-        <Tooltip2 content="Copy link to clipboard">
-          <CopyToClipboard text={this.state.shareURL}>
-            <ControlButton icon={IconNames.DUPLICATE} onClick={this.selectShareInputText} />
-          </CopyToClipboard>
-        </Tooltip2>
-      </div>
-    );
-
-    return (
-      <Popover2
-        popoverClassName="Popover-share"
-        inheritDarkTheme={false}
-        content={shareButtonPopoverContent}
-      >
-        <Tooltip2 content="Get shareable link">
-          <ControlButton icon={IconNames.SHARE} />
-        </Tooltip2>
-      </Popover2>
-    );
-  }
-
-  private selectShareInputText() {
-    if (this.shareInputElem.current !== null) {
-      this.shareInputElem.current.focus();
-      this.shareInputElem.current.select();
+  const selectShareInputText = () => {
+    if (shareInputElem.current !== null) {
+      shareInputElem.current.focus();
+      shareInputElem.current.select();
     }
-  }
-}
+  };
+
+  const shareButtonPopoverContent = (
+    <div key={shareURL}>
+      <input defaultValue={shareURL} readOnly={true} ref={shareInputElem} />
+      <Tooltip2 content="Copy link to clipboard">
+        <CopyToClipboard text={shareURL}>
+          <ControlButton icon={IconNames.DUPLICATE} onClick={selectShareInputText} />
+        </CopyToClipboard>
+      </Tooltip2>
+    </div>
+  );
+
+  return (
+    <Popover2
+      popoverClassName="Popover-share"
+      inheritDarkTheme={false}
+      content={shareButtonPopoverContent}
+    >
+      <Tooltip2 content="Get shareable link">
+        <ControlButton icon={IconNames.SHARE} />
+      </Tooltip2>
+    </Popover2>
+  );
+};
 
 export default SourceRecorderShareCell;
diff --git a/src/features/dataVisualizer/drawable/ArrayDrawable.tsx b/src/features/dataVisualizer/drawable/ArrayDrawable.tsx
index f54311a731..494004da84 100644
--- a/src/features/dataVisualizer/drawable/ArrayDrawable.tsx
+++ b/src/features/dataVisualizer/drawable/ArrayDrawable.tsx
@@ -5,7 +5,7 @@ import { Config } from '../Config';
 import DataVisualizer from '../dataVisualizer';
 import { isEmptyList, isList, toText } from '../dataVisualizerUtils';
 import { DataTreeNode, TreeNode } from '../tree/TreeNode';
-import { NullDrawable } from './NullDrawable';
+import { NullDrawable } from './Drawable';
 
 type ArrayProps = {
   nodes: TreeNode[];
@@ -16,7 +16,7 @@ type ArrayProps = {
 /**
  *  Represents an array in a tree.
  */
-export class ArrayDrawable extends React.PureComponent<ArrayProps> {
+class ArrayDrawable extends React.PureComponent<ArrayProps> {
   render() {
     const createChildText = (node: DataTreeNode, index: number) => {
       const nodeValue = node.data;
@@ -78,3 +78,5 @@ export class ArrayDrawable extends React.PureComponent<ArrayProps> {
     );
   }
 }
+
+export default ArrayDrawable;
diff --git a/src/features/dataVisualizer/drawable/ArrowDrawable.tsx b/src/features/dataVisualizer/drawable/ArrowDrawable.tsx
index 6787fbd3de..ee62c70699 100644
--- a/src/features/dataVisualizer/drawable/ArrowDrawable.tsx
+++ b/src/features/dataVisualizer/drawable/ArrowDrawable.tsx
@@ -10,24 +10,24 @@ type ArrowConfig = { from: { x: number; y: number }; to: { x: number; y: number
  *
  * Used with ArrayDrawable and FunctionDrawable.
  */
-export class ArrowDrawable extends React.PureComponent<ArrowConfig> {
-  render() {
-    return (
-      <Arrow
-        key={this.props + ''}
-        points={[
-          this.props.from.x,
-          this.props.from.y,
-          this.props.to.x + Config.ArrowPointerOffsetHorizontal,
-          this.props.to.y + Config.ArrowPointerOffsetVertical
-        ]}
-        pointerWidth={Config.ArrowPointerSize}
-        pointerLength={Config.ArrowPointerSize}
-        fill={Config.Fill}
-        stroke={Config.Stroke}
-        strokeWidth={Config.StrokeWidth}
-        preventDefault={false}
-      ></Arrow>
-    );
-  }
-}
+const ArrowDrawable: React.FC<ArrowConfig> = props => {
+  return (
+    <Arrow
+      key={props + ''}
+      points={[
+        props.from.x,
+        props.from.y,
+        props.to.x + Config.ArrowPointerOffsetHorizontal,
+        props.to.y + Config.ArrowPointerOffsetVertical
+      ]}
+      pointerWidth={Config.ArrowPointerSize}
+      pointerLength={Config.ArrowPointerSize}
+      fill={Config.Fill}
+      stroke={Config.Stroke}
+      strokeWidth={Config.StrokeWidth}
+      preventDefault={false}
+    ></Arrow>
+  );
+};
+
+export default React.memo(ArrowDrawable);
diff --git a/src/features/dataVisualizer/drawable/BackwardArrowDrawable.tsx b/src/features/dataVisualizer/drawable/BackwardArrowDrawable.tsx
index 0a6e2cf141..66f88a68fb 100644
--- a/src/features/dataVisualizer/drawable/BackwardArrowDrawable.tsx
+++ b/src/features/dataVisualizer/drawable/BackwardArrowDrawable.tsx
@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import React from 'react';
 import { Arrow } from 'react-konva';
 
 import { Config } from '../Config';
@@ -8,10 +8,9 @@ type ArrowConfig = { from: { x: number; y: number }; to: { x: number; y: number
 /**
  * Represents an arrow used to connect a parent node and a child node that has been drawn before,
  * that is positioned to the top left of the parent node.
- *
  */
-export class BackwardArrowDrawable extends PureComponent<ArrowConfig> {
-  /**
+const BackwardArrowDrawable: React.FC<ArrowConfig> = ({ from, to }) => {
+  /*
    *  Connects a box to a previously known box, the arrow path is more complicated.
    *
    *  After coming out of the starting box, it moves to the left,
@@ -22,41 +21,43 @@ export class BackwardArrowDrawable extends PureComponent<ArrowConfig> {
    *  ▲     │
    *  └─────┘
    */
-  render() {
-    // The starting coordinate is the centre of the starting box
-    // The ending coordinate is along the top edge of the ending box, and Config.ArrowSpaceHorizontal pixels from the left edge
-    const bottomY = this.props.from.y + Config.BoxHeight / 2 + Config.ArrowMarginBottom;
-
-    // The x coordinate of the left most part of the backward arrow
-    const leftX = this.props.to.x - Config.ArrowMarginHorizontal;
-
-    // The y coordinate of the top most part of the backward arrow
-    const topY = this.props.to.y - Config.ArrowMarginTop;
-
-    const path = [
-      this.props.from.x,
-      this.props.from.y,
-      this.props.from.x,
-      bottomY,
-      leftX,
-      bottomY,
-      leftX,
-      topY,
-      this.props.to.x + Config.ArrowPointerOffsetHorizontal,
-      topY,
-      this.props.to.x + Config.ArrowPointerOffsetHorizontal,
-      this.props.to.y + Config.ArrowPointerOffsetVertical
-    ];
-    return (
-      <Arrow
-        points={path}
-        pointerLength={Config.ArrowPointerSize}
-        pointerWidth={Config.ArrowPointerSize}
-        fill={Config.Fill}
-        stroke={Config.Stroke}
-        strokeWidth={Config.StrokeWidth}
-        preventDefault={false}
-      ></Arrow>
-    );
-  }
-}
+
+  // The starting coordinate is the centre of the starting box
+  // The ending coordinate is along the top edge of the ending box, and Config.ArrowSpaceHorizontal pixels from the left edge
+  const bottomY = from.y + Config.BoxHeight / 2 + Config.ArrowMarginBottom;
+
+  /** The x coordinate of the left most part of the backward arrow */
+  const leftX = to.x - Config.ArrowMarginHorizontal;
+
+  /** The y coordinate of the top most part of the backward arrow */
+  const topY = to.y - Config.ArrowMarginTop;
+
+  const path = [
+    from.x,
+    from.y,
+    from.x,
+    bottomY,
+    leftX,
+    bottomY,
+    leftX,
+    topY,
+    to.x + Config.ArrowPointerOffsetHorizontal,
+    topY,
+    to.x + Config.ArrowPointerOffsetHorizontal,
+    to.y + Config.ArrowPointerOffsetVertical
+  ];
+
+  return (
+    <Arrow
+      points={path}
+      pointerLength={Config.ArrowPointerSize}
+      pointerWidth={Config.ArrowPointerSize}
+      fill={Config.Fill}
+      stroke={Config.Stroke}
+      strokeWidth={Config.StrokeWidth}
+      preventDefault={false}
+    />
+  );
+};
+
+export default React.memo(BackwardArrowDrawable);
diff --git a/src/features/dataVisualizer/drawable/Drawable.ts b/src/features/dataVisualizer/drawable/Drawable.ts
index 3d1be53987..b1b89eb69e 100644
--- a/src/features/dataVisualizer/drawable/Drawable.ts
+++ b/src/features/dataVisualizer/drawable/Drawable.ts
@@ -1,4 +1,5 @@
-export { ArrayDrawable } from './ArrayDrawable';
-export { ArrowDrawable } from './ArrowDrawable';
-export { FunctionDrawable } from './FunctionDrawable';
-export { NullDrawable } from './NullDrawable';
+export { default as ArrayDrawable } from './ArrayDrawable';
+export { default as ArrowDrawable } from './ArrowDrawable';
+export { default as BackwardArrowDrawable } from './BackwardArrowDrawable';
+export { default as FunctionDrawable } from './FunctionDrawable';
+export { default as NullDrawable } from './NullDrawable';
diff --git a/src/features/dataVisualizer/drawable/FunctionDrawable.tsx b/src/features/dataVisualizer/drawable/FunctionDrawable.tsx
index cc97faa51d..50bff25a68 100644
--- a/src/features/dataVisualizer/drawable/FunctionDrawable.tsx
+++ b/src/features/dataVisualizer/drawable/FunctionDrawable.tsx
@@ -11,7 +11,7 @@ type FunctionProps = {
 /**
  * Represents a function object drawn using two circles.
  */
-export class FunctionDrawable extends React.PureComponent<FunctionProps> {
+class FunctionDrawable extends React.PureComponent<FunctionProps> {
   render() {
     return (
       <Group {...this.props}>
@@ -60,3 +60,5 @@ export class FunctionDrawable extends React.PureComponent<FunctionProps> {
     );
   }
 }
+
+export default FunctionDrawable;
diff --git a/src/features/dataVisualizer/drawable/NullDrawable.tsx b/src/features/dataVisualizer/drawable/NullDrawable.tsx
index 5fa0b63f21..e588803caa 100644
--- a/src/features/dataVisualizer/drawable/NullDrawable.tsx
+++ b/src/features/dataVisualizer/drawable/NullDrawable.tsx
@@ -14,7 +14,7 @@ type NullProps = {
  *
  *  Used in conjunction with ArrayDrawable.
  */
-export class NullDrawable extends React.PureComponent<NullProps> {
+class NullDrawable extends React.PureComponent<NullProps> {
   render() {
     return (
       <Line
@@ -28,3 +28,5 @@ export class NullDrawable extends React.PureComponent<NullProps> {
     );
   }
 }
+
+export default NullDrawable;
diff --git a/src/features/dataVisualizer/tree/Tree.tsx b/src/features/dataVisualizer/tree/Tree.tsx
index fb774df7de..8e02a04494 100644
--- a/src/features/dataVisualizer/tree/Tree.tsx
+++ b/src/features/dataVisualizer/tree/Tree.tsx
@@ -4,8 +4,7 @@ import { Layer, Text } from 'react-konva';
 import { Config } from '../Config';
 import { Data, Pair } from '../dataVisualizerTypes';
 import { isArray, isFunction, toText } from '../dataVisualizerUtils';
-import { ArrowDrawable } from '../drawable/ArrowDrawable';
-import { BackwardArrowDrawable } from '../drawable/BackwardArrowDrawable';
+import { ArrowDrawable, BackwardArrowDrawable } from '../drawable/Drawable';
 import { AlreadyParsedTreeNode } from './AlreadyParsedTreeNode';
 import {
   ArrayTreeNode,