Cleaning up misc console warnings (#9)

src/components/Common/ModelTag.jsx

@@ -1,12 +1,12 @@
-import React, {Component} from "react";
+import React from "react";
 import "./ModelTag.scss";
 import Task from "../../helpers/Task";
 import Framework from "../../helpers/Framework";
 import {ReactComponent as Microchip} from "../../resources/icons/microchip-solid.svg";
 
 export default function ModelTag(props) {
   let className = "model-tag";
-  if (!!props.type && props.type != "") {
+  if (!!props.type && props.type !== "") {
     className = `${className} -${props.type}`;
   }
   let Icon = (() => <></>);

src/components/Experiment/QuickInput/QuickTextInput.js

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React from "react";
 import useBEMNaming from "../../../common/useBEMNaming";
 import Task from "../../../helpers/Task";
 import "./QuickTextInput.scss";

src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.js

@@ -7,7 +7,7 @@ import {QuickInputType} from "../../quickInputType";
 
 export default function SampleInputsTab(props) {
     const {getBlock, getElement} = useBEMNaming("sample-inputs");
-    const {isUnselected, isSelected, selectedIndex, selectInput, type} = useSampleInputControl(props);
+    const {isUnselected, isSelected, selectInput, type} = useSampleInputControl(props);
 
     const getInputClassName = (url) => {
         let className = `input-${type}`;
@@ -25,6 +25,8 @@ export default function SampleInputsTab(props) {
                 return makeSampleTextInput(url, index);
             case QuickInputType.Audio:
                 return makeSampleAudioInput(url, index);
+            default:
+                return makeDefaultErrorInput();
         }
     }
 
@@ -53,6 +55,12 @@ export default function SampleInputsTab(props) {
         )
     }
 
+    function makeDefaultErrorInput() {
+        return (
+            <div>No input type defined</div>
+        )
+    }
+
     const task = Task.getStaticTask(props.task);
     const sampleInputs = props.sampleInputs ?? [];
     return (
@@ -72,6 +80,8 @@ export default function SampleInputsTab(props) {
                 return "Select text";
             case QuickInputType.Audio:
                 return "Select an audio file";
+            default:
+                return "Error: no input type set";
         }
     }
 }

src/components/Experiment/QuickOutput/InputPreview.js

@@ -17,8 +17,7 @@ export default function InputPreview(givenProps) {
     switch (props.inputType) {
       case "text":
         return <p className={getElement("text")}>{props.input}</p>;
-      case "audio":
-        // Currently not being used
+      case "audio":  // Currently not being used
       case "image":
       default:
         return <img className={getElement("image")} src={props.input} />;

src/components/Experiment/QuickOutput/Outputs/AudioToText/testData/testAudioToTextOutput.js

@@ -1,4 +1,4 @@
-import { audioToText } from "../../../../../../helpers/TaskIDs";
+// import { audioToText } from "../../../../../../helpers/TaskIDs";
 
 export const TestAudioToTextOutputGeneratedToken = {
     id: "sampleidhere"

src/components/Experiment/QuickOutput/Outputs/ImageEnhancement/ImageEnhancement.js

@@ -5,7 +5,7 @@ import SingleColumnImageOutput from "../_Common/components/SingleColumnImageOutp
 import ImageEnhancementImage from "./ImageEnhancementImage";
 
 export default function ImageEnhancement(props) {
-  const {getElement, getBlock} = useBEMNaming('image-enhancement');
+  const {getBlock} = useBEMNaming('image-enhancement');
 
 
   return <div className={getBlock()}>

src/components/Experiment/QuickOutput/Outputs/ObjectDetection/hooks/useObjectDetectionControl.js

@@ -1,6 +1,5 @@
 import {useHoverControl} from "../../_Common/hooks/useHoverControl";
 import {useSectionFilters} from "./useSectionFilters";
-import React from 'react';
 import ObjectDetectionTrialParser from "../utils/ObjectDetectionTrialParser";
 import InstanceSegmentationTrialParser from "../../InstanceSegmentation/utils/InstanceSegmentationTrialParser";
 import useBoundingBoxControl from "./useBoundingBoxControl";

src/components/Experiment/QuickOutput/Outputs/ObjectDetection/hooks/useSectionFilters.js

@@ -1,4 +1,4 @@
-import React, {useMemo} from "react";
+import {useMemo} from "react";
 import {useCategoryFilters} from "../../_Common/hooks/useCategoryFilters";
 import {useConfidenceFilters} from "./useConfidenceFilters";
 

src/components/Experiment/QuickOutput/Outputs/_Common/utils/Colors.js

@@ -77,6 +77,6 @@ export const colorToRGBA = (function() {
       return; // invalid color
     }
     ctx.fillRect(0, 0, 1, 1);
-    return [ ... ctx.getImageData(0, 0, 1, 1).data ];
+    return [ ...ctx.getImageData(0, 0, 1, 1).data ];
   });
 })();

src/components/ExperimentDetails/ExperimentDetailPage.jsx

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import React from "react";
+// import React, { useState } from "react";
 import ExperimentDetailHeader from "./ExperimentDetailHeader";
 import TrialOutputWrapper from "./TrialOutputWrapper";
 import Header from "../Header/Header";
@@ -13,7 +14,7 @@ import RemoveInputModal from "./modals/RemoveInputModal";
 import InputCannotBeRemovedModal from "./modals/InputCannotBeRemovedModal";
 
 export default function ExperimentDetailPage(props) {
-  const [value, setValue] = useState(-1);
+  // const [value, setValue] = useState(-1);
 
   const { getBlock, getElement } = useBEMNaming("experiment-detail-page");
   const calculateCardWidth = () => {
@@ -30,7 +31,7 @@ export default function ExperimentDetailPage(props) {
       className={getElement("trial")}
     >
       <TrialOutputWrapper
-        value={value}
+        // value={value}
         trial={trial}
         onDeleteTrial={props.onDeleteTrial}
         deletedTrial={props.trialToDelete}

src/components/ExperimentDetails/Inputs/InputPreviewImage.js

@@ -13,7 +13,7 @@ export function InputPreviewImage(props) {
     >
       <img
         className={getElement(`selection-btn-img`)}
-        alt={"selected image"}
+        alt={"selection"}
         src={props.selectedInput}
       />{" "}
       Input {props.selectedIndex + 1}

src/components/ExperimentDetails/Inputs/InputPreviewText.js

@@ -2,7 +2,7 @@ import React from "react";
 import useBEMNaming from "../../../common/useBEMNaming";
 
 export function InputPreviewText(props) {
-  const { getBlock, getElement } = useBEMNaming("input-preview");
+  const { getElement } = useBEMNaming("input-preview");
 
   let textToDisplay = props.selectedInput;
 

src/components/ExperimentDetails/Summaries/ImageEnhancementSummary.js

@@ -5,7 +5,6 @@ import "./ImageEnhancementSummary.scss";
 
 export default function ImageEnhancementSummary(props) {
   const {getBlock, getElement} = useBEMNaming("image-enhancement-summary");
-  const goBack = () => History?.back() || null;
 
   return <div className={getBlock()}>
     <div className={getElement("summary")}>

src/components/ExperimentDetails/Summaries/TextToCodeSummary.js

@@ -1,7 +1,6 @@
 import useBEMNaming from "../../../common/useBEMNaming";
 import useTextOutput from "../../Experiment/QuickOutput/Outputs/Text/useTextOutput";
 import React from "react";
-import SyntaxHighlighter from "react-syntax-highlighter";
 import { CodePreview } from "../../Experiment/QuickOutput/Outputs/_Common/components/CodePreview";
 
 export default function TextToCodeSummary(props) {

src/components/ExperimentDetails/TrialOutputWrapper.jsx

@@ -66,6 +66,8 @@ export default function TrialOutputWrapper(props) {
           return <TextSummary trial={props.trial} value={props.value} />;
         case textToCode:
           return <TextToCodeSummary trial={props.trial} value={props.value} />;
+        default:
+          return <div>Something went wrong</div>
       }
 
       return <></>;

src/components/ExperimentDetails/modals/RemoveInputModal.js

@@ -6,7 +6,7 @@ import "./RemoveInputModal.scss"
 
 export default function RemoveInputModal(props) {
 
-  const {getBlock, getElement} = useBEMNaming("remove-input-modal")
+  const {getElement} = useBEMNaming("remove-input-modal")
 
   return <ConfirmationModal icon={<TrashIcon/>} onCancel={props.close}>
     <h2 className={getElement("heading")}>

src/components/HomePage/HomePage.jsx

@@ -8,7 +8,6 @@ export default function HomePage(props) {
     const {getBlock} = useBEMNaming("home-page");
 
     const modelDetailsRef = useRef();
-    const otherRef = useRef()
 
 
     return (

src/components/HomePage/TaskCard.jsx

@@ -6,9 +6,9 @@ import "./TaskCard.scss";
 
 
 export function TaskCard(props) {
-  const {getBlock, getElement} = useBEMNaming("example-task-card");
+  const { getBlock } = useBEMNaming("example-task-card");
 
-  const {defaultModel, runTrial, sampleInputs, trial, onBackClicked, onCompare} = props;
+  const { defaultModel, runTrial, sampleInputs, trial, onBackClicked, onCompare } = props;
 
   const getContent = () => {
     if (!trial)
@@ -29,8 +29,8 @@ export function TaskCard(props) {
     />
   }
 
-  return <div className={getBlock()}>
+  return <div className={ getBlock() }>
 
-    {getContent()}
+    { getContent() }
   </div>
 }

src/components/HomePage/TaskExamples.jsx

@@ -32,7 +32,6 @@ export function TaskExamples(props) {
 
   const {
     name,
-    description,
     Icon,
     defaultModel,
     sampleInputs,

src/components/Tutorials/IntroTutorial/Slides/IntroTutorialComparingModels.js

@@ -20,7 +20,7 @@ export default function IntroTutorialComparingModels(props) {
             <div className={getElement("graphic-top")}>
 
                 <div className={getElement("gradient-border")}></div>
-                <img className={getElement("graphic-img")} alt={"a picture of a plant"} src={PlantPicture}/>
+                <img className={getElement("graphic-img")} alt={"plant"} src={PlantPicture}/>
                 <FatArrow className={getElement("graphic-arrow graphic-arrow-left")}/>
                 <FatArrow className={getElement("graphic-arrow graphic-arrow-right")}/>
             </div>

src/components/Tutorials/IntroTutorial/Slides/IntroTutorialIntro.js

@@ -3,7 +3,7 @@ import React from "react";
 import "./IntroTutorialIntro.scss";
 
 export default function IntroTutorialIntro(props) {
-    const {getBlock, getElement} = useBEMNaming("intro-tutorial-intro");
+    const {getElement} = useBEMNaming("intro-tutorial-intro");
 
 
     return <>

src/components/Tutorials/IntroTutorial/Slides/IntroTutorialMachineLearningOverview.js

@@ -20,7 +20,7 @@ export default function IntroTutorialMachineLearningOverview(props) {
             <div className={getElement("background-gradient")}></div>
             <div className={getElement("section-content")}>
                 <div className={getElement("content-group")}>
-                    <img className={getElement("content-image")} src={MachineLearning1} alt={"Input image"}/>
+                    <img className={getElement("content-image")} src={MachineLearning1} alt={"Input"}/>
                     <p className={getElement("content-label")}>Input image</p>
                 </div>
                 <div className={getElement("content-group")}>

src/components/Tutorials/IntroTutorial/Slides/IntroTutorialMachineLearningUses.js

@@ -22,9 +22,9 @@ export default function IntroTutorialMachineLearningUses(props) {
             </button>
         </div>
         <div className={getElement("img-area")}>
-            <img src={PlantPicture} alt={"picture of a plant"} className={getElement("img-1")}/>
+            <img src={PlantPicture} alt={"plant"} className={getElement("img-1")}/>
 
-            <img src={BirdPicture} alt={"picture of a bird"} className={getElement("img-2")}/>
+            <img src={BirdPicture} alt={"bird"} className={getElement("img-2")}/>
         </div>
     </>
 }

src/components/Tutorials/IntroTutorial/Slides/IntroTutorialPlantPrompt.js

@@ -11,7 +11,7 @@ export default function IntroTutorialPlantPrompt(props) {
         <p className={getElement("intro-text")}>Model Input</p>
         <p className={getElement("title")}>Can a machine learning model identify what type of plant this is?</p>
         <div className={getElement("img-wrapper")}>
-            <img src={PlantPicture} alt={"a picture of a plant"} className={getElement("img")}/>
+            <img src={PlantPicture} alt={"plant"} className={getElement("img")}/>
         </div>
 
         <button className={getElement("cta")} onClick={() => props.goToSection(props.index + 1)}>

src/components/Tutorials/IntroTutorial/Slides/IntroTutorialTrainingInfographic.js

@@ -19,7 +19,7 @@ function ImageGroup(props) {
     const {getBlock, getElement} = useBEMNaming("intro-tutorial-training-infographic-image-group");
 
     return <div className={getBlock() + " " + props.className}>
-        {props.images.map(img => <img src={img} alt={"picture of a plant"} className={getElement("img")}/>)}
+        {props.images.map(img => <img src={img} alt={"plant"} className={getElement("img")}/>)}
     </div>
 }
 

src/helpers/Task.js

@@ -229,6 +229,8 @@ export default class Task {
         return TestTextOutput;
       case audioToText:
         return TestAudioToTextOutput;
+      default:
+        return undefined
     }
   }