forked from rai-project/mlmodelscope
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Initial setup for CSV Task * First pass at a CSV Preview component completed (for sample input) * First pass at inputs for CSV finished * Table editing first pass completed * minor cleanup * Code cleanup * Fixing a bug with getting task names, particularly for UploadInputsTab * Deleted unnecessary comments * Minor bug fix for Video Classification Sample Input, other changes
- Loading branch information
1 parent
0b6e56e
commit d9e34b2
Showing
35 changed files
with
2,917 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
120 changes: 120 additions & 0 deletions
120
src/components/Experiment/QuickInput/Tabs/CsvInput/CsvInputsTab.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
|
|
||
| import useBEMNaming from "../../../../../common/useBEMNaming"; | ||
| import Task from '../../../../../helpers/Task'; | ||
| import CsvIcon from "../../../../../resources/icons/icon-csv-file.svg"; | ||
|
|
||
| import "./CsvInputsTab.scss"; | ||
|
|
||
| const csvHeaders = ["a", "b", "c", "d", "e", "f"]; | ||
| const emptyCsv = [ | ||
| ["", "", "", "", "", ""], | ||
| ["", "", "", "", "", ""], | ||
| ["", "", "", "", "", ""], | ||
| ["", "", "", "", "", ""], | ||
| ["", "", "", "", "", ""], | ||
| ["", "", "", "", "", ""], | ||
| ]; | ||
| const emptyCsvString = ',,,,,\n,,,,,\n,,,,,\n,,,,,\n,,,,,\n,,,,,'; | ||
|
|
||
| export default function CsvInputsTab(props) { | ||
| const task = Task.getStaticTask(props.task); | ||
|
|
||
| const { getElement, getBlock } = useBEMNaming('csv-inputs'); | ||
|
|
||
| const taskName = (task.useMultiInput ? (task.inputs[props.inputIndex]?.inputType) : task.inputType || '').toLowerCase(); | ||
| // Note: Currently using both new and old way of handling inputs but should refactor in the future | ||
| const inputText = task.inputText || props.input.inputText; | ||
|
|
||
| const [csvData, setCsvData] = useState(emptyCsv); | ||
|
|
||
| useEffect(() => { | ||
| const csvString = stringifyCsvData(); | ||
| if (csvString !== emptyCsvString) { | ||
| props.inputSelected(csvString, props.inputIndex); | ||
| } | ||
| }, [csvData]) | ||
|
|
||
| const updateCell = (event, rowIndex, colIndex) => { | ||
| if (event.persist) | ||
| event.persist(); | ||
|
|
||
| let csvCopy =[...csvData]; | ||
| csvCopy[rowIndex][colIndex] = event.target.value; | ||
| setCsvData(csvCopy); | ||
| } | ||
|
|
||
| const stringifyCsvData = () => { | ||
| return csvData.map((row) => row.join(',')).join('\n'); | ||
| } | ||
|
|
||
| const downloadCsv = () => { | ||
| const fileType = 'text/csv'; | ||
| const fileName = 'text-input.csv'; | ||
| const csvString = stringifyCsvData(); | ||
| const blob = new Blob([csvString], { type: fileType }); | ||
|
|
||
| let a = document.createElement('a'); | ||
| a.download = fileName; | ||
| a.href = URL.createObjectURL(blob); | ||
| a.dataset.downloadurl = [fileType, a.download, a.href].join(':'); | ||
| a.style.display = "none"; | ||
| document.body.appendChild(a); | ||
| a.click(); | ||
| document.body.removeChild(a); | ||
| setTimeout(function() { URL.revokeObjectURL(a.href); }, 1500); | ||
| } | ||
|
|
||
| return ( | ||
| <div className={getBlock()}> | ||
| <div className={getElement('title')}> | ||
| <b>Manually enter {taskName} contents</b> | ||
| {" "}to {inputText.toLowerCase()} | ||
| </div> | ||
| <div className={getElement('container')}> | ||
| <div className={getElement('csv-header')}> | ||
| { csvHeaders.map((header) => { | ||
| return ( | ||
| <div className={getElement('col-header')} key={`row-header-${header}`}> | ||
| {header} | ||
| </div> | ||
| ) | ||
| })} | ||
| </div> | ||
| <div className={getElement('table')}> | ||
| { csvData.map((row, rowIndex) => { | ||
| return ( | ||
| <div className={getElement('row')} key={`row-${rowIndex}`}> | ||
| <p className={getElement('row-label')}> | ||
| {rowIndex} | ||
| </p> | ||
|
|
||
| { row.map((cell, colIndex) => { | ||
| return ( | ||
| <div className={getElement('cell')} key={`cell-${rowIndex}-${colIndex}`}> | ||
| <input | ||
| className={getElement('text-input')} | ||
| type="text" | ||
| value={cell} | ||
| onChange={(event) => (updateCell(event, rowIndex, colIndex))} | ||
| /> | ||
| </div> | ||
| ) | ||
| })} | ||
| </div> | ||
| ) | ||
| })} | ||
| </div> | ||
| <div> | ||
| <button | ||
| disabled={csvData === emptyCsv} | ||
| className={getElement('download-csv-button')} | ||
| onClick={() => downloadCsv()}> | ||
| <img src={CsvIcon} alt="download-csv-icon" /> | ||
| <p>Download</p> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
106 changes: 106 additions & 0 deletions
106
src/components/Experiment/QuickInput/Tabs/CsvInput/CsvInputsTab.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| @import "src/App"; | ||
|
|
||
| $csv-label-size: 18px; | ||
|
|
||
| .csv-inputs { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 100%; | ||
|
|
||
| &__title { | ||
| @include body; | ||
| } | ||
|
|
||
| &__container { | ||
| margin-top: 24px; | ||
| padding: 20px; | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
|
|
||
| &::placeholder { | ||
| opacity: .9; | ||
| } | ||
| } | ||
|
|
||
| &__csv-header { | ||
| display: flex; | ||
| flex-direction: row; | ||
| padding-left: $csv-label-size // Indentation equal to width of row labels | ||
|
|
||
| } | ||
| &__col-header { | ||
| width: 151px; | ||
| padding-left: 5px; | ||
| border-top: 1px solid $charcoalLightest; | ||
| border-left: 1px solid $charcoalLightest; | ||
| background-color: $smokeDarkest; | ||
| font-weight: 800; | ||
| } | ||
| &__col-header:last-of-type { | ||
| width: 152px; | ||
| border-right: 1px solid $charcoalLightest; | ||
| } | ||
|
|
||
| &__table { | ||
| display: flex; | ||
| flex-direction: column; | ||
| font-size: 13px; | ||
| } | ||
|
|
||
| &__row { | ||
| display: flex; | ||
| flex-direction: row; | ||
| } | ||
| &__row:first-child { | ||
| p:first-of-type { | ||
| border-top: 1px solid $charcoalLightest; | ||
| } | ||
| } | ||
| &__row:first-of-type &__cell { | ||
| border-top: 1px solid $charcoalLightest; | ||
| } | ||
| &__row:last-of-type { | ||
| border-bottom: none; | ||
| } | ||
| &__row-label { | ||
| width: $csv-label-size; | ||
| background-color: $smokeDarkest; | ||
| font-weight: 800; | ||
| border-bottom: 1px solid $charcoalLightest; | ||
| border-left: 1px solid $charcoalLightest; | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| &__cell { | ||
| border-right: 1px solid $charcoalLightest; | ||
| border-bottom: 1px solid $charcoalLightest; | ||
|
|
||
| input { | ||
| width: 150px; | ||
| padding-left: 5px; | ||
| } | ||
| } | ||
| &__cell:first-of-type { | ||
| border-left: 1px solid $charcoalLightest; | ||
| } | ||
|
|
||
| &__download-csv-button { | ||
| border: 1px solid $charcoalLightest; | ||
| border-radius: 5px; | ||
| margin-top: 20px; | ||
| padding: 5px; | ||
| font-weight: 600; | ||
| color: $charcoalLightest; | ||
| img { | ||
| height: 50px; | ||
| } | ||
| p { | ||
| margin-top: 5px; | ||
| font-size: 12px; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.