Create Vis App MVP2

[LibbyUX]

Feature request from @katyb converted into a GitHub issue:

[bherr2]

There is no header for edges for various reasons. We can do this in the next MVP once it's spec'ed, but cannot change it now as it will break a lot of stuff. We were going to add more flexibility to headers in the next MVP, so would be appropriate then.

[LibbyUX]

Thank you @bherr2 !

[LibbyUX]

@bherr2 & @J-Yash - Regarding this UI: Does this need to be a table that users can edit within the CDE? If so, would a modal/overlay with a table to edit serve this feature request? Do you have any other ideas for this specific feature request that I should take into account?

[bherr2]

No, they cannot edit the data from CDE

[LibbyUX]

@bherr2 thank you! Does this feature need a front-facing UI? If so, do you have any expectations or technical limitations that I should be aware of during the design process?

[bherr2]

Yes, for the input data, we will need a user interface for them to change/verify the column headers (thus flexibility in the headers). That way if they have MY_X_VALUE they can say that is for x, and MY_TERM_VALUE_ERERERDFDF is actually the cell type column, etc. We will try to choose the right one by default, but they will need to be able to tweak it, like we do with the anchor cell type feature.

[LibbyUX]

Ok great, thank you @bherr2! So, to me, this seems to be a user interface modification within the Create Visualization Application - Is this correct?

If so, please see our most recent iteration of the CDE's Create Vis App.

• Could this be a UI within Step 1 that appears after they upload their data?
• Or would it be better placed elsewhere?

[bherr2]

Yes, it would need to be part of step 1

[LibbyUX]

@bherr2 Great. I'm on this now. I will follow up here with more questions as I have them. Thanks for all of your help!

[LibbyUX]

@bherr2 - I broke this feature request out from the first step of uploading data. Initially, we were using "Format and upload data" as the Step 1 title. Adding this step is formatting/organizing, in a way.

Compare the previous design (from mid-July) to the 8.1.2024 iteration accommodating this feature request.

Please comment in Figma directly if I missed anything or if any other ideas pop up that you need me to track.

[bherr2]

One immediate thing, is that we would want to pre-select the required columns if we can determine it from the header. In which case, if we pre-select, they won't see the dropdown label you have, so you'd need to make it more obvious what the selected things were.

[bherr2]

We do not want them to have to select the right columns every time, especially if they follow our preferred csv header template

[LibbyUX]

Thank you for the feedback @bherr2 - This is their first impression of the page without uploading anything.

I want to make sure I'm tracking correctly: Say they complete step 1 and upload a perfectly formatted cell type table CSV. Once uploaded, in step 2, the mat-selects update to the modified inactive state because of their well-formatted data with our preselection behavior. Is this accurate? Or do you envision this differently? Is there anything majorly wrong with this workflow?

I will iterate more late next week!

[bherr2]

Yes, something like you show would work! I assume "Form field selection" would actually be "x", "y", "Cell Type" respectively for the required columns if they uploaded in the preferred format.

[LibbyUX]

Great!

Yes, that's correct, the select components return a preselected header name based on their data. Will we need an error state for these selects?

Currently, I think some verbiage updates can happen to make this workflow easier, but good to know I'm on the right track.

[bherr2]

We should probably do sanity checks on the values (ie make sure x and y coordinates are actual numbers) in which case an error could appear. And of course, they can't proceed until they've chosen the required columns.

[LibbyUX]

Handoff comment: Ready for dev

Create Vis App MVP2

Several new cosmetic and functional updates to this page. Please ask if you have questions!

• NEW: Create Vis Workflow Cards
  • Design System Component Workflow Card #712
• Page: Entry/ready state
• Page: Modified & ready to generate vis

Design Details

• Many cosmetic UI updates to improve/unify this UI with future UIs
• Tooltip text has been updated everywhere on this page

Behavior Details

• All creation modules are a fixed width. It's too much to manage responsively at the moment.
• Organize Data (2) preselects columns based on their titles.
• Configure Parameters (Step 3) form fields computationally updates the visualization output.

[LibbyUX]

Lib to follow up shortly about template buttons

[LibbyUX]

Hey @edlu77! I spoke with @bherr2 & Katy just now on the template button functionality: There was a misunderstanding about updating this functionality, but we got it sorted.

We are going to use the same functionality that we currently have, linking out to the template on Google Sheets. There is no change in functionality. This said, I am going to edit/delete that bullet point in my original handoff comment and edit the button from basic text with icon to just basic text. Please don't hesitate to reach out with any questions! Thanks so much!

[edlu77]

@LibbyUX Thanks for sorting this out!

[LibbyUX]

Hi @edlu77 & @bherr2,

I have updated the workflow cards in the CDE spec per our conversation today. Please see in Figma:

• Canvas Section: Create Vis workflow cards

I also edited my handoff comment on this issue to:

• replace verbiage on the workflow card (formerly creation modules in Figma/GitHub issues)
• update the canvas route in Figma.

Please let me know if you have any questions! Thanks for the great meeting earlier!