Bug/model comparison (#43)

* Fix bug in InputPreviewImage component to display the correct selected input image * Debugged add models feature * Added src to adapt to new input formatting style * Removed boiler loading page for comparision * Fixed just single model ouput for comparision, TODO: Fix InputSelector * Fixed InputSelector for single input and multi-input * Fixed switching between inputs * Fixed mutiple inputs bug * Refactor task retrieval in ExperimentDetailContainer and update navigation in NewExperimentContainer to include task query parameter * Refactor input handling now supporting multiple inputs in model comparison * Added support for input handling and UI for multiple inputs in Experiment components * Add className prop to MultiInputPreview for styling in InputSelectors * Fixed Add Model feature updating input handling and integrated task in URL * Fixed duplicate inputs in the experiment * Add Webpack configuration for handling .mjs files with source-map-loader * Refactor runModels to run trial for each input when adding models * Add title attribute to text previews for full input visibility * Fix input reference in MultiInputPreview for accurate text display * Remove unnecessary query string delimiter in experiment navigation links * Update styles for input selector buttons and document previews
c3sr · Jan 24, 2025 · fe903e2 · fe903e2
1 parent b1bd7e0
commit fe903e2
Show file tree

Hide file tree

Showing 17 changed files with 338 additions and 273 deletions.
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -757,3 +757,19 @@ module.exports = function (webpackEnv) {
     performance: false,
   };
 };
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.mjs$/,
+        resolve: {
+          fullySpecified: false,
+        },
+        ...(isEnvDevelopment && {
+          use: ['source-map-loader'],
+        }),
+        exclude: /node_modules\/@mediapipe\/tasks-vision/,
+      },
+    ],
+  },
+};
diff --git a/src/components/Experiment/QuickInput/useQuickInputControl.js b/src/components/Experiment/QuickInput/useQuickInputControl.js
@@ -133,7 +133,10 @@ export default function useQuickInputControl(props) {
       // Data to be sent to API
       if (typeof url !== 'object') {
         selectedData = [{ src: url, inputType: task.inputType }];
-      } else {
+      } else if (Array.isArray(url)) {
+        selectedData = url.map(u => ({ inputType: task.inputType, src: u }));
+      }
+      else {
         selectedData = [{ inputType: task.inputType, ...url }];
       }
     }

diff --git a/src/components/Experiment/QuickOutput/InputPreview.js b/src/components/Experiment/QuickOutput/InputPreview.js
@@ -1,9 +1,9 @@
 import React from "react";
 import "./InputPreview.scss";
 import useBEMNaming from "../../../common/useBEMNaming";
+import { ReactComponent as DocumentIcon } from "../../../resources/icons/icon-document.svg";
 import CsvIcon from "../../../../src/resources/icons/icon-csv-file.svg";
 
-
 const defaultProps = {
   className: "input-preview",
   input: "",
@@ -27,45 +27,46 @@ export default function InputPreview(givenProps) {
   const getInput = () => {
     switch (props.inputType) {
       case "text":
-        return <p className={getElement("text")}>{props.input.src}</p>;
+        let shortened = props.input.src.split(" ").slice(0, 5).join(" ");
+        shortened = shortened + (shortened.length < props.input.src.length ? "..." : "");
+        return <p className={getElement("text")} title={props.input.src}>{shortened}</p>;
       case "audio":
-        return <audio className={getElement("audio")} controls src={props.input.src} />;
+        return props.input?.src?.title ? <audio className={getElement("audio")} controls src={props.input.src.src} title={props.input.src.title} /> : <audio className={getElement("audio")} controls src={props.input.src} />;
       case "image":
         return <img className={getElement("image")} src={props.input.src} />;
       case "video":
         return <video className={getElement("video")} src={props.input.src} controls />;
+      case "document":
+        return <button className={getElement("document")}><DocumentIcon className='icon' /><a href={props.input.src} target='_blank' ><span>{props.input.description ?? "Document"}</span></a></button>;
       case "csv":
         return (
           <>
-            <a 
-              download="input.csv"
-              href={props.input[0].src}
-              className={getElement('csv')}
-            >
+            <a download="input.csv" href={props.input[0].src} className={getElement('csv')}>
               <img src={CsvIcon} alt="download-csv-icon" />
-              <p>
-                Download
-              </p>
-            </a>            
-          </>          
-        )
+              <p>Download</p>
+            </a>
+          </>
+        );
       default:
         return <p>Not currently supported</p>;
     }
   };
 
   return (
     <div className={getBlock()}>
-      <h3 className={getElement("title")}>
-        Input {inputTypes[props.inputType]}
-      </h3>
+      {props?.experimentInputPreview ||
+        <h3 className={getElement("title")}>
+          Input {inputTypes[props.inputType]}
+        </h3>
+      }
       {getInput()}
-      <button
-        className={getElement("back-button")}
-        onClick={props.onBackClicked}
-      >
-        Try a different {inputTypes[props.inputType]?.toLowerCase()}
-      </button>
+      {props?.experimentInputPreview ||
+        <button
+          className={getElement("back-button")}
+          onClick={props.onBackClicked}
+        >
+          Try a different {inputTypes[props.inputType]?.toLowerCase()}
+        </button>}
     </div>
   );
 }
diff --git a/src/components/Experiment/QuickOutput/MultiInputPreview.js b/src/components/Experiment/QuickOutput/MultiInputPreview.js
@@ -20,11 +20,11 @@ export default function MultiInputPreview(givenProps) {
 
   const getInputs = (input) => {
     switch (input.inputType) {
-      case QuickInputType.Text:
-        return (
-          <p className={getElement("text")}>{input.src}</p>
-        );
-      case QuickInputType.Document:
+      case TaskInputTypes.Text:
+        let shortened = input.src.split(" ").slice(0, 5).join(" ");
+        shortened = shortened + (shortened.length < input.src.length ? "..." : "");
+        return <p className={getElement("text")} title={input.src}>{shortened}</p>;
+      case TaskInputTypes.Document:
         return (
           <button className={getElement("document")}>
             <DocumentIcon className='icon' />
@@ -52,9 +52,9 @@ export default function MultiInputPreview(givenProps) {
 
   return (
     <div className={getBlock()}>
-      <h3 className={getElement("title")}>
+      {props.experimentInputPreview || <h3 className={getElement("title")}>
         Inputs
-      </h3>
+      </h3>}
       <div className={getElement("container")}>
         {
           props.inputs.length > 2 ? (
@@ -90,12 +90,13 @@ export default function MultiInputPreview(givenProps) {
         }
       </div>
 
-      <button
+      {props.experimentInputPreview || <button
         className={getElement("back-button")}
         onClick={props.onBackClicked}
       >
         Try different inputs
-      </button>
+      </button>}
     </div>
   );
+
 }
diff --git a/src/components/ExperimentDetails/ExperimentDetailPage.jsx b/src/components/ExperimentDetails/ExperimentDetailPage.jsx
@@ -24,7 +24,7 @@ export default function ExperimentDetailPage(props) {
     return "33%";
   };
 
-  let trialComponents = props.experiment.trials.map((trial, trialIndex) => (
+  let trialComponents = props.experiment.trials?.map((trial, trialIndex) => (
     <div
       style={{ width: calculateCardWidth() }}
       key={trialIndex}
@@ -57,6 +57,7 @@ export default function ExperimentDetailPage(props) {
           selectInput={props.updateInput}
           getAddModelsLink={props.getAddModelsLink}
           task={props.task}
+          hasMultipleInputs={props.hasMultipleInputs}
         />
         <div className={getElement("scroll-container")}>
           <div className={getElement("trial-cards")}>{trialComponents}</div>

diff --git a/src/components/ExperimentDetails/ExperimentDetailPage.scss b/src/components/ExperimentDetails/ExperimentDetailPage.scss
@@ -1,7 +1,6 @@
 @import "../../App";
 
 .experiment-detail-page {
-
   &__sticky-bar {
     position: fixed;
     bottom: 0;
@@ -24,13 +23,12 @@
     }
   }
 
-
   &__trial-cards {
     display: flex;
     flex-direction: row-reverse;
     width: 100%;
     max-width: 100%;
-    overflow-x: scroll;
+    overflow-x: auto;
     background: $white;
     padding: 20px 12px;
     transform: rotate(180deg);
@@ -40,16 +38,12 @@
       transform: none;
       overflow-x: hidden;
       align-items: center;
-
-
     }
 
     @include maxWidth(550px) {
       padding-left: 0;
       padding-right: 0;
     }
-
-
   }
 
   &__trials-header {
@@ -91,7 +85,6 @@
       margin-left: 0;
     }
 
-
     @include tabletWidth {
       transform: none;
       margin-left: 0;

diff --git a/src/components/ExperimentDetails/Inputs/ExperimentInputs.jsx b/src/components/ExperimentDetails/Inputs/ExperimentInputs.jsx
@@ -1,9 +1,7 @@
 import useBEMNaming from "../../../common/useBEMNaming";
 import React, { useEffect, useRef, useState } from "react";
 import "./ExperimentInputs.scss";
-import Button from "../../Buttons/Button";
-import NoInputs from "./NoInputs";
-import InputPreview from "./InputPreview";
+import Button from "../../Buttons/Button"; import NoInputs from "./NoInputs";
 import InputSelectors from "./InputSelectors";
 
 export const ExperimentInputs = (props) => {
@@ -27,13 +25,13 @@ export const ExperimentInputs = (props) => {
     };
   }, [isOpen]);
 
-  const selectedIndex = props.inputs.indexOf(props.selectedInput);
+  const selectedIndex = props.selectedInput && (props.hasMultipleInputs ? props.inputs.indexOf(props.selectedInput) : props.inputs.findIndex(input => input.src === props.selectedInput.src));
 
-  const hasNoInputs = props.inputs.length === 0 || props.inputs[0] === "";
+  const hasNoInputs = !props.inputs || props.inputs.length === 0 || props.inputs[0] === "";
 
-  const handleSelect = (input) => {
+  const handleSelect = (input, idx) => {
     setIsOpen(false);
-    props.selectInput(input);
+    props.selectInput(input, idx);
   };
 
   if (hasNoInputs)
@@ -42,33 +40,27 @@ export const ExperimentInputs = (props) => {
   return (
     <div className={getBlock()}>
       <div ref={handlerRef} className={getElement("selection-area")}>
-        <InputPreview
-          toggleOpen={() => setIsOpen(!isOpen)}
-          selectedInput={props.selectedInput}
+
+        <Button
+          content={"Add model"}
+          icon="plus"
+          isPrimary={false}
+          isSmall={false}
+          link={props.getAddModelsLink(props)}
+        />
+
+        <InputSelectors
+          inputs={props.inputs}
           selectedIndex={selectedIndex}
-          isOpen={isOpen}
+          handleSelect={handleSelect}
+          showAddInputModal={props.showAddInputModal}
+          showDeleteInputModal={props.showDeleteInputModal}
           task={props.task}
         />
 
-        {isOpen && (
-          <InputSelectors
-            inputs={props.inputs}
-            selectedIndex={selectedIndex}
-            handleSelect={handleSelect}
-            showAddInputModal={props.showAddInputModal}
-            showDeleteInputModal={props.showDeleteInputModal}
-            task={props.task}
-          />
-        )}
       </div>
 
-      <Button
-        content={"Add model"}
-        icon="plus"
-        isPrimary={false}
-        isSmall={false}
-        link={props.getAddModelsLink(props)}
-      />
+
     </div>
   );
 };
diff --git a/src/components/ExperimentDetails/Inputs/ExperimentInputs.scss b/src/components/ExperimentDetails/Inputs/ExperimentInputs.scss
@@ -3,6 +3,7 @@
 .experiment-inputs {
   align-items: center;
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   width: 100%;
 
@@ -14,12 +15,13 @@
 
   .secondary-button {
     height: 48px;
+    margin-left: auto;
+    margin-bottom: 20px;
   }
 
   &__selection-area {
     margin-bottom: 32px;
-    position: relative;
-    width: clamp(200px, 500px, 400px);
+    width: 100%;
 
     @include tabletWidth {
       max-width: 300px;

diff --git a/src/components/ExperimentDetails/Inputs/InputPreview.js b/src/components/ExperimentDetails/Inputs/InputPreview.js
diff --git a/src/components/ExperimentDetails/Inputs/InputPreviewImage.js b/src/components/ExperimentDetails/Inputs/InputPreviewImage.js
@@ -3,7 +3,6 @@ import React from "react";
 
 export function InputPreviewImage(props) {
   const { getElement } = useBEMNaming("input-preview");
-
   return (
     <button
       className={getElement(