Chore: Improved CSV Preview truncation, bugfixes (#42)

* Improved how truncation is handled in CsvPreview * Updated various broken text sample inputs
c3sr · Aug 27, 2024 · b066fbf · b066fbf
1 parent 94a4e9c
commit b066fbf
Show file tree

Hide file tree

Showing 18 changed files with 154 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -103,6 +103,7 @@ The project is structured as follows:
   - `TaskName.scss`
 
 - Create a new story for the task in `QuickInput.stories.js`
+  - For the sample inputs, you'll create them below. Come back and import them here once you have.
 
 - If the task requires new input type(s), you will need to add those:
   - Add the new input type to `TaskInputTypes` and `QuickInputType`
@@ -113,6 +114,7 @@ The project is structured as follows:
     - You can temporarily switch the default state for `selectedTab` to the index of your new tab, so that you don't need to repeatedly switch tabs through page refreshes
   - Update `SampleInputsTab`:
     - Open `sampleImages.js` and add `Sample[TaskName]Inputs`. If your task is using `useMultiInput` then you will need to make a parent array, and then for each input type another array of sample input objects.
+    - Go back to `QuickInput.stories.js` and update the sample inputs
     - Add the new input type to `makeSampleInput`
     - Create a `makeSample[input type]Input` function
     - Add the new input type with appropriate text to `makeTaskTitle`

diff --git a/src/components/Experiment/QuickInput/QuickInput.stories.js b/src/components/Experiment/QuickInput/QuickInput.stories.js
@@ -45,7 +45,11 @@ import {
   SampleAudioClassificationInputs,
   SampleVideoClassificationInputs,
   SampleMaskGenerationInputs,
-  SampleTableEditingInputs
+  SampleTableEditingInputs,
+  SampleTextToAudio,
+  SampleTextConversationInputs,
+  SampleTextToCodeInputs,
+  SampleTextInputs
 } from "../../../helpers/sampleImages";
 
 import { TaskInputTypes } from "../../../helpers/TaskInputTypes";
@@ -132,11 +136,7 @@ MaskGeneration.args = {
 
 export const Text = Template.bind({});
 Text.args = {
-  sampleInputs: [
-    "The quick brown fox jumps over the lazy dog",
-    "The five boxing wizards jump quickly",
-    "look at the dog",
-  ],
+  sampleInputs: SampleTextInputs,
   model: {
     output: {
       type: textToText,
@@ -146,11 +146,7 @@ Text.args = {
 
 export const TextToCode = Template.bind({});
 TextToCode.args = {
-  sampleInputs: [
-    "The quick brown fox jumps over the lazy dog",
-    "The five boxing wizards jump quickly",
-    "look at the dog",
-  ],
+  sampleInputs: SampleTextToCodeInputs,
   model: {
     output: {
       type: textToCode,
@@ -186,9 +182,7 @@ AudioToText.args = {
 
 export const TextToAudio = Template.bind({});
 TextToAudio.args = {
-  sampleInputs: [
-    "a chill song with influences from lofi, chillstep and downtempo",
-  ],
+  sampleInputs: SampleTextToAudio,
   model: {
     output: {
       type: textToAudio,
@@ -198,11 +192,7 @@ TextToAudio.args = {
 
 export const TextConversation = Template.bind({});
 TextConversation.args = {
-  sampleInputs: [
-    "Show me a recipe for pizza",
-    "What is the weather tomorrow?",
-    "What is the meaning of life?",
-  ],
+  sampleInputs: SampleTextConversationInputs,
   model: {
     output: {
       type: textConversation,

diff --git a/src/components/Experiment/QuickInput/Tabs/CsvInput/CsvPreview.js b/src/components/Experiment/QuickInput/Tabs/CsvInput/CsvPreview.js
@@ -6,6 +6,7 @@ import useBEMNaming from "../../../../../common/useBEMNaming";
 import "./CsvPreview.scss";
 
 const columnLimit = 10;
+const rowLimit = 10;
 
 export default function CsvPreview(props) {
     const csvUrl = props.url;
@@ -14,20 +15,22 @@ export default function CsvPreview(props) {
 
     const [csvHeaders, setCsvHeaders] = useState([]);
     const [csvData, setCsvData] = useState([]);
-    const [isTruncated, setIsTruncated] = useState(false);
+    const [rowsTruncated, setRowsTruncated] = useState(false);
+    const [colsTruncated, setColsTruncated] = useState(false);
 
     const config = {
         header: true,
         download: true,
         dynamicTyping: true,
-        preview: 10,  // Only parse (and display) the first 10 rows of the csv file
-        complete: function(results) {
+        preview: rowLimit,  // Only parse the first X rows of the csv file
+        complete: (results) => {
             const { errors, meta, data } = results;
             const fields = meta.fields;
 
             setCsvHeaders(fields)
-            setCsvData(data);
-            setIsTruncated(meta.truncated || (fields.length > columnLimit));            
+            setCsvData(data);   
+            setRowsTruncated(meta.truncated);  // T/F depending on if config.preview was less than # of rows in the csv
+            setColsTruncated(fields.length > columnLimit)    
 
             if (errors.length > 0) { 
                 // Per PapaParse documentation, errors don't necessarily mean that parsing failed
@@ -42,19 +45,27 @@ export default function CsvPreview(props) {
 
     return (
         <div className={getBlock()}>
-            <div>
+            { (rowsTruncated || colsTruncated) && (
+                <div className={getElement("warning")}>
+                    <b>Note:&nbsp;</b>This table has been truncated. 
+                        You can download the full file below.
+                </div>
+            )}
+            <div className={getElement("table-container")}>
                 { csvData.length > 0 ? (
                     <div className={getElement("table")}>
-                        <div className={getElement("header")}>
-                            { csvHeaders.map((header, index) => {
-                                if (index < columnLimit) {
-                                    return (
-                                        <div className={getElement("cell")} key={`column-${index}`}>
-                                            {header}
-                                        </div>
-                                    )
-                                }
-                            })}
+                        <div className={getElement("max-header")}>
+                            <div className={getElement("header")}>
+                                { csvHeaders.map((header, index) => {
+                                    if (index < columnLimit) {
+                                        return (
+                                            <div className={getElement("cell")} key={`column-${index}`}>
+                                                {header}
+                                            </div>
+                                        )
+                                    }
+                                })}
+                            </div>
                         </div>
                         { csvData.map((item, rowIndex) => {
                             return (
@@ -63,28 +74,30 @@ export default function CsvPreview(props) {
                                         if (colIndex < columnLimit) {
                                             const cellText = !(val instanceof Date) ? val : val.toDateString();
                                             return (
-                                                    <div className={getElement("cell")} key={`column-${key}`}>
-                                                        <div className={getElement("cell-text")}>
+                                                <div className={getElement("cell")} key={`column-${key}`}>
+                                                    <div className={getElement("cell-text")}>
+                                                        {cellText}
+                                                    </div>
+                                                    <div className={getElement("cell-tooltip")}>
+                                                        <span className="tooltip-text">
                                                             {cellText}
-                                                        </div>
-                                                        <div className={getElement("cell-tooltip")}>
-                                                            <span className="tooltip-text">
-                                                                {cellText}
-                                                            </span>
-                                                        </div>
+                                                        </span>
                                                     </div>
+                                                </div>
                                             )
                                         }})
                                     }
                                 </div>
                             )
                         })}
-                        { isTruncated && (
+                        { rowsTruncated && (
                             <div className={getElement("row")}>
-                                <div className={getElement("truncated")}>
-                                    <b>Note:&nbsp;</b>This table has been truncated. 
-                                    You can download the full file below.
+                                <div className={getElement("truncated-row-cell")}>
+                                    <b>...</b>
                                 </div>
+                                {[...Array(columnLimit - 1)].map((x, i) =>
+                                    <div className={getElement("truncated-row-cell")} key={i} />
+                                )}
                             </div>
                         )}
                     </div>
@@ -93,6 +106,16 @@ export default function CsvPreview(props) {
                         Loading csv data...
                     </div>
                 )}
+                { colsTruncated && (
+                    <div className={getElement("truncated-table")}>
+                        <div className={getElement("truncated-header")}>
+                            <b>...</b>
+                        </div>
+                        {[...Array(rowLimit)].map((x, i) =>
+                            <div className={getElement("truncated-col-cell")} key={i} />
+                        )}
+                    </div>
+                )}
             </div>
         </div>
     )

diff --git a/src/components/Experiment/QuickInput/Tabs/CsvInput/CsvPreview.scss b/src/components/Experiment/QuickInput/Tabs/CsvInput/CsvPreview.scss
@@ -3,12 +3,20 @@
 .csv-preview {
     width: 902px;  // 90px per cell * 10 cells per row + 2px border
 
+    &__table-container {
+        display: flex;
+        flex-direction: row;
+    }
     &__table {
         display: flex;
         flex-direction: column;
         border: 1px solid $charcoalLightest;
         font-size: 13px;
     }
+    &__max-header {
+        display: flex;
+        flex-direction: row;
+    }
     &__header {
         display: flex;
         flex-direction: row;
@@ -27,7 +35,10 @@
     &__cell {
         border-right: 1px solid $charcoalLightest;
         padding: 5px;
+        display: flex;
+        align-items: center;
         width: 90px;
+        height: 42px;
     }
     &__cell:last-of-type {
         border-right: none;
@@ -56,8 +67,44 @@
     &__cell:hover .tooltip-text {
         visibility: visible;
     }
-    &__truncated {
-        padding: 10px 5px;
+    &__warning {
         color: $darkRed;
+        padding-bottom: 20px;
+    }
+    &__truncated-table {
+        color: $darkRed;
+        border-top: 1px solid $charcoalLightest;
+        border-right: 1px solid $charcoalLightest;
+        border-bottom: 1px solid $charcoalLightest;
+    }
+    &__truncated-header {
+        color: $darkRed;
+        background-color: $smokeDarkest;
+        border-bottom: 1px solid $charcoalLightest;
+        display: flex;
+        align-items: center;
+        height: 43px;
+        padding: 5px;
+    }
+    &__truncated-header, &__truncated-row-cell {
+        font-size: 20px;
+        letter-spacing: 2px;
+    }
+    &__truncated-col-cell, &__truncated-row-cell {
+        padding: 5px;
+        display: flex;
+        align-items: center;
+    }
+    &__truncated-row-cell {
+        width: 90px;
+        border-right: 1px solid $charcoalLightest;
+        color: $darkRed;
+    }
+    &__truncated-row-cell:last-of-type {
+        border-right: none;
+    }
+    &__truncated-col-cell {
+        height: 43px;     
+        border-bottom: 1px solid $charcoalLightest;
     }
 }
diff --git a/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.js b/src/components/Experiment/QuickInput/Tabs/SampleInput/SampleInputsTab.js
@@ -74,7 +74,7 @@ export default function SampleInputsTab(props) {
     function makeSampleTextInput(text, index) {
         return (
             <button onClick={() => { selectInput(index); }} key={index} className={getElement(getInputClassName(text))}>
-                <div>{text}</div>
+                <div>{text.src}</div>
             </button>
         );
     }

diff --git a/src/components/Experiment/QuickOutput/Outputs/AudioToText/AudioToTextOutput.js b/src/components/Experiment/QuickOutput/Outputs/AudioToText/AudioToTextOutput.js
@@ -9,8 +9,6 @@ import { TextOutputBox } from "../Text/TextOutputBox";
 import { audioToText } from "../../../../../helpers/TaskIDs";
 
 export default function AudioToTextOutput(props) {
-    console.log("AudioToTextOutput", props)
-
     const { getBlock } = useBEMNaming("audio-to-text-output");
     const { output, inferenceDuration, input, setInput } = useTextOutput(
         props.trial

diff --git a/...ckOutput/Outputs/DocumentQuestionAnswering/testData/testDocumentQuestionAnsweringOuput.js b/...ckOutput/Outputs/DocumentQuestionAnswering/testData/testDocumentQuestionAnsweringOuput.js
@@ -11,7 +11,7 @@ export const TestDocumentQuestionAnswering = {
             inputType:"document"
         },
         {
-            description: "Hello  World",
+            src: "Hello World",
             inputType:"text"
         }
     ],

diff --git a/src/components/Experiment/QuickOutput/Outputs/Text/testData/testTextOutput.js b/src/components/Experiment/QuickOutput/Outputs/Text/testData/testTextOutput.js
@@ -106,7 +106,7 @@ export const TestTextOutputGeneratedToken = {
 export const TestTextOutput = {
   id: "9d52d414-cc78-4cd5-a292-afdc0b9332ec",
   inputs: [
-    'translate English to German: "Luigi often said to me that he never wanted the brothers to end up in court," she wrote.',
+    { src: 'translate English to German: "Luigi often said to me that he never wanted the brothers to end up in court," she wrote.' },
   ],
   completed_at: "2022-06-03T18:17:14.513854Z",
   results: {

diff --git a/...ents/Experiment/QuickOutput/Outputs/TextClassification/testData/testTextClassification.js b/...ents/Experiment/QuickOutput/Outputs/TextClassification/testData/testTextClassification.js
@@ -4,7 +4,7 @@ export const TestTextClassificationOutputGeneratedToken = {
 
 export const TestTextClassificationOutput = {
   id: "sampletesttextclassificationoutputidhere",
-  inputs: ["The weather is very pleasant today."],
+  inputs: [{ src: "The weather is very pleasant today." }],
   completed_at: "2023-06-03T18:17:14.513854Z",
   results: {
     'duration': "9.216154124s",

diff --git a/...t/QuickOutput/Outputs/TextGuidedImageToImage/testData/testTextGuidedImageToImageOutput.js b/...t/QuickOutput/Outputs/TextGuidedImageToImage/testData/testTextGuidedImageToImageOutput.js
@@ -13,7 +13,7 @@ export const TestTextGuidedImageToImage = {
             inputType: "image"
         },
         {
-            description: "Hello World",
+            src: "Hello World",
             inputType: "text"
         }
     ],

diff --git a/src/components/Experiment/QuickOutput/Outputs/TextToAudio/testData/testTextToAudioOutput.js b/src/components/Experiment/QuickOutput/Outputs/TextToAudio/testData/testTextToAudioOutput.js
@@ -5,7 +5,7 @@ export const TestTextToAudioOutputGeneratedToken = {
 export const TestTextToAudioOutput = {
     id: "sampletesttexttoaudiooutputidhere",
     inputs: [
-        'a chill song with influences from lofi, chillstep and downtempo',
+        { src: 'a chill song with influences from lofi, chillstep and downtempo' },
     ],
     completed_at: "2023-06-03T18:17:14.513854Z",
     results: { 

diff --git a/src/components/Experiment/QuickOutput/Outputs/TextToCode/testData/testTextToCodeOutput.js b/src/components/Experiment/QuickOutput/Outputs/TextToCode/testData/testTextToCodeOutput.js
@@ -3,7 +3,7 @@ import { textToCode } from "../../../../../../helpers/TaskIDs";
 export const TestTextToCodeOutput = {
   id: "9d52d414-cc78-4cd5-a292-afdc0b9332ec",
   inputs: [
-    "write an iterator that squares each element of a list of numbers and returns an iterator of the squares.",
+    { src: "write an iterator that squares each element of a list of numbers and returns an iterator of the squares." },
   ],
   completed_at: "2022-06-03T18:17:14.513854Z",
   results: {

diff --git a/src/components/Experiment/QuickOutput/Outputs/TextToImage/testData/testTextToImageOutput.js b/src/components/Experiment/QuickOutput/Outputs/TextToImage/testData/testTextToImageOutput.js
@@ -8,7 +8,7 @@ export const TestTextToImageGeneratedToken = {
 export const TestTextToImageOutput = {
     id: "sampletesttexttovideooutputidhere",
     inputs: [
-        'a chill song with influences from lofi, chillstep and downtempo',
+        { src: 'a chill song with influences from lofi, chillstep and downtempo' },
     ],
     completed_at: "2023-06-03T18:17:14.513854Z",
     results: {

diff --git a/src/components/Experiment/QuickOutput/Outputs/TextToVideo/testData/testTextToVideoOutput.js b/src/components/Experiment/QuickOutput/Outputs/TextToVideo/testData/testTextToVideoOutput.js
@@ -8,7 +8,7 @@ export const TestTextToVideoGeneratedToken = {
 export const TestTextToVideoOutput = {
     id: "sampletesttexttovideooutputidhere",
     inputs: [
-        'a chill song with influences from lofi, chillstep and downtempo',
+        { src: 'a chill song with influences from lofi, chillstep and downtempo' },
     ],
     completed_at: "2023-06-03T18:17:14.513854Z",
     results: {

diff --git a/...QuickOutput/Outputs/VisualQuestionAnswering/testData/testVisualQuestionAnsweringOutput.js b/...QuickOutput/Outputs/VisualQuestionAnswering/testData/testVisualQuestionAnsweringOutput.js
@@ -13,7 +13,7 @@ export const TestVisualQuestionAnswering = {
             inputType: "image"
         },
         {
-            description: "Hello  World",
+            src: "Hello World",
             inputType: "text"
         }
     ],