Upload a CSV - Configure your Data

## ACs

- The next parent section should be "Configure your File"
- Auto-scroll to this section after the user adds their file to the dropzone
- Underneath the section title should be the following text: "Map your data to be compatible with InfluxDB ingestion."
- Underneath that text, display an informational text box containing terms and definitions for Fields, Measurements, and Tags. (See Figma)

- Field (required)Key-value pair for storing time-series data. For example, insect name and its count. You can have one field per record (row of data), and many fields per bucket.key data type: stringvalue data type: float, integer, string, or boolean
- Measurement (required)A category for your fields. In our example, it is census. You can have one measurement per record (row of data), and many measurements per bucket.data type: string
- Tag (optional)Key-value pair for field metadata. For example, census location. You can have many tags per record (row of data) and per bucket.key data type: stringvalue data type: float, integer, string, or boolean

- Below the terms and definitions, display the .csv file name and display a PREVIEW of the user's data.
- The PREVIEW should behave dynamically according to the column mappings that the user assigned either via their annotations or via the annotation builder.
- As the user selects their _measurement and _time mappings, dynamically update the _tag and _field list.
- _measurement and _time are required mappings (must be chosen/assigned prior to being able to click the "Finish Upload" button)
- Below the PREVIEW, display the "Measurement Column" dropdown mapper. Display a red asterisk next to the "Measurement Column" so that the user knows it's required. As the user selects their measurement mapping, dynamically update the PREVIEW with their choice. Also, dynamically update the Tag and Field Column list. (See Figma)
- Below the "Measurement Column" dropdown mapper, display the "Timestamp Column" dropdown mapper and the "Timestamp column format" dropdown. Display a red asterisk on both of these as well so that the user knows they're required.
- Underneath the "Timestamp Column" text yet above the timestamp column dropdown, display the following text: "Select your timestamp column"
- Underneath the "Timestamp column format" text yet above the timestamp column format dropdown, display the following text: "Select the format your timestamps are currently in"
- The two timestamp column format options displayed in the dropdown should be "UNIX UTC" and "ISO 8601"
- Informational Text:

Select the format your timestamps are currently in.
UNIXTIME example: 1667847503
ISO 8601 example: 2020-02-08 09:30:26.123

- As the user selects their timestamp column mapping, dynamically update the PREVIEW with their choice. Also, dynamically update the Tag and Field Column list. (See Figma)
- Below the Timestamp column dropdown section, display the "Tag and Field Columns" (no red asterisk needed)
- Any remaining unmapped column names should display in the "Tag and Field Columns" list with radio buttons to the right of each column name.
- The radio buttons for all remaining columns should default to the "field" option yet allow the user the change it to the field if they desire.
- One of the radio buttons MUST be chosen, do not allow the user to deselect both. It must be one or the other (tag or field). Reminder - default the radio button selections to "field."
- If the user changes their mind about the _measurement selection dropdown option, dynamically update the tag and field column list.
- If the user has a properly annotated .csv file - with a _measurement and _time column specified, then detect that these columns are already assigned and display the user's assigned column mappings in the preview box and show their assignments in the dropdowns/radio button sections. Even with annotated .csv files, allow the user to change their column assignments/mappings of tags and fields.
- If unannotated, parse just the first row as the file so that the user can assign the required annotations to the columns

- Define 1 and only 1 column as a measurement
- Define 1 and only 1 column as Time.
- The time column format must either be UNIX UTC or ISO 8601.

- For all .csv file types:

- Define the remaining columns as either a field or a tag (one or the other) via a radio button.
- Display the remaining column names in a list below the time dropdown. Display the field/tag assignments to the right. See Figma.
- These header assignments must be required as indicated by the disabled 'Finish Upload' button. Consult design on whether or not to add a red asterisk next to required sections.
- Default the non-measurement and non-time columns as 'fields.' (auto-select field as the radio button choice)
- Display an error if the user doesn't have at least one field column mapped and disable the "Finish Upload" button. "You must have at least one column mapped as a field"
- Header column assignments can only be assigned once and only once to one of these assignments: measurement, time, field, tag. Add data validation to prevent duplicate column assignments.

- Display a 'Cancel' and a 'Finish Upload' Button (See Figma)
- Disable the "Finish Upload" button until all required content is finished. (_measurement and _time mappings)
- Error Handling and user feedback: successful upload and failed upload + why fail.
- The success message should match what's in Figma. "filename.csv uploaded successfully. Query your data!" Hyperlink the "Query your Data" to the new script editor in the data explorer (auto-toggle it on for the user).
- Existing Error Messages for Failed CSV Uploads:

- failed to read metadata: missing expected annotation datatype.
- failed to read metadata: failed to read annotations: wrong number of field
- failed to read metadata: column “” has invalid datatype: unsupported data type “”
- failed to read metadata: column “_value” has invalid datatype: unsupported data type “float”
- failed to initialize execute state: could not find bucket “”
- Failed to execute Flux query
- compilation failed: error @2:11-2:20222: expected comma in the property list, got ILLEGAL
- runtime error @3:14-3:32: to: no column with label _measurement exists
- runtime error @3:14-3:32: to: table has no _field column

- Reminder to dynamically update the preview of the user's data to match the column assignments that they choose.

## Implementation

- Figma: https://www.figma.com/file/U2zSUPmTAkOofGEpQkNe5T/Upload-a-CSV?node-id=211%3A1640
- "I don't think we have a file size limit in code, but browsers limit how big of a file you can upload. Firefox is 2GB, chrome is 4GB...maybe they're all 4GB these days?" - Bucky
- Looks like its configurable by environment via the feature flag:

- # 27 * 1024 * 1024 = 28311552 --> 27 MiB is the current limit for UI CSV parsing
- name: UI CSV byte limit Schema Browser
- description: Controls the CSV byte limit for CSVs streamed from the API for Schema Browser
- contact: QX Team, Ariel
- key: increaseCsvLimit
- default: 28311552
- lifetime: Permanent
- expose: true

- Here are some sample annotated CSVs:
https://influx-testdata.s3.amazonaws.com/air-sensor-data-annotated.csv
https://influx-testdata.s3.amazonaws.com/bitcoin-historical-annotated.csv
https://influx-testdata.s3.amazonaws.com/noaa-ndbc-latest-observations-annotated.csv
https://influx-testdata.s3.amazonaws.com/usgs-earthquake-all-week-annotated.csv