Chore: Misc bugfixes (#41)

* Minor bugfixes for UppyFileTypeCheckerPlugin

* Added 3D model directions image, minor bug fixes for 3d models

* Readme cleanup

README.md

@@ -122,7 +122,6 @@ The project is structured as follows:
   - Update `URLInputsTab` as necessary
     - Be sure to read the `IMPORTANT` comment before editing the inputs
       - There are multiple paths in the render function depending on if your input is a `useMultipleInput`, `multiple`, etc. - if you change one, you will likely need to update all of them.
-      ...WIP?
 
 - Add the new task to `ModelDetailPage` in `getSampleInputs` and `getInputType`
 
@@ -131,8 +130,6 @@ The project is structured as follows:
     - In the `makeOutput` function, add a new case statement for your new Output
       - Generally you will only need to pass through the `trialOutput` and `onBackClicked` but if you need to be able to re-run the trial on the same page (for example with Conversations) then you would also add a prop here for `runTrial`.
 
-- ...to be continued
-
 - Additional Notes:
   - To test the upload dashboard in storybook, open `useUploadInputControl` and:
     - Find the text `COMMENT THIS OUT BEFORE COMMITTING` and uncomment it.

src/components/Experiment/QuickOutput/MultiInputPreview.js

@@ -5,6 +5,7 @@ import { ReactComponent as DocumentIcon } from "../../../resources/icons/icon-do
 
 import "./MultiInput.scss";
 import { TaskInputTypes } from "../../../helpers/TaskInputTypes";
+import { QuickInputType } from "../QuickInput/quickInputType";
 
 const defaultProps = {
   className: "multi-input-preview",
@@ -19,11 +20,11 @@ export default function MultiInputPreview(givenProps) {
 
   const getInputs = (input) => {
     switch (input.inputType) {
-      case TaskInputTypes.Text:
+      case QuickInputType.Text:
         return (
           <p className={getElement("text")}>{input.src}</p>
         );
-      case TaskInputTypes.Document:
+      case QuickInputType.Document:
         return (
           <button className={getElement("document")}>
             <DocumentIcon className='icon' />
@@ -32,16 +33,16 @@ export default function MultiInputPreview(givenProps) {
             </a>
           </button>
         );
-      case TaskInputTypes.Image:
+      case QuickInputType.Image:
         return (
           <img
             className={getElement("image")}
             src={input.src}
             alt={input.description ?? "Input Image"}
           />
         );
-      case TaskInputTypes.Audio:
-      case TaskInputTypes.Csv:
+      case QuickInputType.Audio:
+      case QuickInputType.Csv:
       default:
         return (
           <p className={getElement("error")}>Unable to display input</p>

src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3D.scss

@@ -72,18 +72,20 @@
         &-subtitle {
             @include body;
             border-bottom: 1px solid $smokeDarkest;
-            margin-bottom: 24px;
             padding-bottom: 16px;
 
             @include mobileWidth-lg {
               @include bodySmall;
             }
         }   
-        &-help-text {
-            @include bodySmall;
-            font-size: 14px;
-            margin-bottom: 12px;
-        }        
+        &-model-controls {
+            display: flex;
+            justify-content: center;
+
+            img {
+                max-width: 300px;
+            }
+        }     
         &-model {
             border: 1px solid $smokeDarkest;
             border-radius: 5px;

src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3DOutput.js

@@ -12,6 +12,8 @@ import Rating from "../Classification/Rating";
 import OutputDuration from "../_Common/components/OutputDuration";
 import OBJComponent from "./OBJComponent";
 
+import directions from "../../../../../resources/img/3d-model-guide.png";
+
 import "./ImageTo3D.scss";
 
 // Uncomment these to try out other 3D examples
@@ -53,9 +55,10 @@ export default function ImageTo3DOutput(props) {
                     <p className={getElement("output-subtitle")}>
                         {task.outputText}
                     </p>
-                    <p className={getElement("output-help-text")}>
-                        Hover over the model and scroll to zoom, click-and-hold to rotate, right-click-and-hold to drag
-                    </p>                        
+                    <div className={getElement('output-model-controls')}>
+                        <img src={directions} alt="guide for viewing the 3d model" />
+                    </div>     
+
                     <div className={getElement("output-model")}>
                         <Canvas>
                             {/* Very basic 3D Box that can be rotated with OrbitControls */}

src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3D.scss

@@ -53,17 +53,19 @@
         &-subtitle {
             @include body;
             border-bottom: 1px solid $smokeDarkest;
-            margin-bottom: 12px;
             padding-bottom: 16px;
 
             @include mobileWidth-lg {
               @include bodySmall;
             }
         }   
-        &-help-text {
-            @include bodySmall;
-            font-size: 14px;
-            margin-bottom: 12px;
+        &-model-controls {
+            display: flex;
+            justify-content: center;
+
+            img {
+                max-width: 300px;
+            }
         }
         &-model {
             border: 1px solid $smokeDarkest;

src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3DOutput.js

@@ -13,6 +13,8 @@ import OBJComponent from "../ImageTo3D/OBJComponent";
 import TextOutputInputSection from "../Text/TextOutputInputSection";
 import useTextOutput from "../Text/useTextOutput";
 
+import directions from "../../../../../resources/img/3d-model-guide.png";
+
 import "./TextTo3D.scss";
 
 export default function TextTo3DOutput(props) {
@@ -56,9 +58,9 @@ export default function TextTo3DOutput(props) {
                     <p className={getElement("output-subtitle")}>
                         {task.outputText} 
                     </p>
-                    <p className={getElement("output-help-text")}>
-                        Hover over the model and scroll to zoom, click-and-hold to rotate, right-click-and-hold to drag
-                    </p>                    
+                    <div className={getElement('output-model-controls')}>
+                        <img src={directions} alt="guide for viewing the 3d model" />
+                    </div>                 
                     <div className={getElement("output-model")}>
                         <Canvas>
                             {/* Just using the lighting from the BoxExample */}

src/helpers/UppyFileTypeCheckerPlugin.js

@@ -53,7 +53,7 @@ export const getAllowedFileTypes = (task) => {
       // Some file types are unfortunately not supported by the file checker
       return {
         fileTypes: ['*'],
-        mimeTypes: '*/*'
+        mimeTypes: ['*/*']
       };
   }
 };
@@ -73,6 +73,10 @@ export default class UppyFileTypeCheckerPlugin extends BasePlugin {
   }
 
   confirmFileType = async (fileIDs) => {
+    if (Array.isArray(this.allowedFileTypes) && this.allowedFileTypes[0] === '*') {
+      return Promise.resolve();
+    }
+
     // Note: This will break if we ever allow multiple uploads
     const file = this.uppy.getFile(fileIDs[0]);
     const blob = new Blob([file.data]);

src/helpers/sampleImages.js

@@ -229,7 +229,7 @@ export const SampleImageToTextInputs = [
 ];
 
 export const SampleTextTo3DInputs = [
-  "a cool drum set"
+  { src: "a cool drum set" }
 ];
 
 export const SampleTextClassificationInputs = [