search

multinet-app / multinet-client

Multinet web client application
https://multinet-app.readthedocs.io
4 stars 3 forks source link

Implement preview table during CSV upload #134

Closed waxlamp closed 3 years ago

waxlamp commented 3 years ago

The intent is to have a mini table view (similar, but not identical to, the existing table view component) that appears in the upload dialog after selecting a file, at the point that the column type dropdowns currently appear. An example of this feature in @kirangadhave's UpSet work can be used for inspiration (but, of course, keeping the style and feel of the component to what is appropriate for Multinet):

Table View

Specific features for our iteration of this:

@jtomeck, could you start by creating a mockup of this in Figma (or wherever is most comfortable for you)?

UPDATE: Jared has done a mockup which we can use as a guide for implementation: preview_table

jtomeck commented 3 years ago

https://www.figma.com/file/GSRmOdOi49FDEkazoQXtyv/Dropdowns-in-table?node-id=0%3A1

@waxlamp - I know I mentioned doing something like what we have on VIIME, but I decided against it because it doesn't use less screen real estate and requires you to do extra work to figure out what each column is set as. If you want me to elaborate further I can, but I decided to just spruce up what you had in the screenshot above, because often the simplest solution is the best one. This way you can see what each of the columns is set at on the top level without having to dig into the UI or make extra clicks to do this simple action.

JackWilb commented 3 years ago

I love this design! Looks great :) I would just suggest that we change the step one from "upload dataset" to "select dataset" or something similar so users don't think the dataset has been uploaded before the types are set

waxlamp commented 3 years ago

I really like it. I second Jack's comment about using "select dataset" as the phrase for step 1.

I left a comment in the Figma mockup, but I don't get what that little 2 in the circle is supposed to be. Is that counting the step you're on?

Related question: what Vuetify component would this use? Is it a "wizard"?

jtomeck commented 3 years ago

but I don't get what that little 2 in the circle is supposed to be.

Related question: what Vuetify component would this use? Is it a "wizard"?

This would be a stepper, which is what was in your original screenshot as well. So it would be 1, 2, and 3 in the 3 circles. I had the flag there like a "finish" flag in a race. Honestly, I could do with or without that, as it was just me trying to be creative as a designer, potentially unnecessarily lol.

jtomeck commented 3 years ago

@waxlamp - I should also say, the first icon is only a green check because that step is complete. It'll say 1 until they get to step 2