[Toaster] Questions on Recipe Summary page

[Barros Pena, Belen]

On 22/01/2014 02:48, "Reyna, David" <david.reyna at windriver.com> wrote:

>Hi Belen,
>
>I have some design questions on the Recipe Summary page, while I work out
>the layer re-referencing and column enablement.
>
>1) Your pulldown for "Edit Columns" is in sorted order, but this is
>driven by "tablecols", which is presumably in "layout" order and _not_ in
>sorted order. Should "Edit Columns" be sorted on the fly by the template?

I am thinking yes. AlexD has implemented this for the builds table, so
hopefully he has some advise on how to do that.

Just to clarify, this ordering thing is not a random, gratuitous request.
I have an explanation for it! :) For the record, here it goes: the table
layout groups headings in a logical sequence. For example, in the tasks
table, it kind of makes sense to have order as the first column, since it
provides an unique identifier for each task and also narrates the
execution sequence of the build. However, when you are using the 'Edit
columns' menu, you must scan and find the checkbox you are looking for as
quickly as possible. For that, the table 'logical' grouping doesn't help:
an easily recognisable sorting convention, like alphabetical order, does.

>
>2) When (and/or how) would you sort the table by the fields "Version",
>"Depends", "Brought in by", or "Layer commit"? I would think that we
>would suppress sorting by these columns.

Recipe version is not sortable. If you visit
http://www.yoctoproject.org/toaster/all-recipes.html you'll see that it
has the .muted class applied and has no hover state (i.e. it is not
clickable). Sorting by Dependencies or Reverse dependencies will quickly
show which recipes have no dependencies of any kind, and which ones have
the most dependencies. Sorting by layer commit will group recipes that
come from the same commit (although the outcome will probably be the same
as sorting by layer).

The approach I've followed in general is, when in doubt, lean towards
providing as many data manipulation capabilities as possible, letting
users choose which ones are useful to them. Having said that, I am
completely open to change. If any of the above use cases sounds completely
useless, let's disable the sorting.

>
>3) What styles should I use for the "Depends" dropdown lists?

If you are referring to the lists that pop up when you click on the
Dependencies and Reverse dependencies numbers, they are standard Twitter
Boostrap popovers 
(http://getbootstrap.com/2.3.2/javascript.html#popovers), so no additional
classes needed. You need to instantiate them, though. The way I do it in
the prototype might not be the best way. I am using a class that is
applied to the cell to instantiate them:

$('.depends > a , .brought_in_by > a, .layer_commit >
a').popover({html:true, container:'body', placement: 'left'});

The above line in main.js instantiates all the popovers required by
Toaster. 

The mark up is like this:

<td class="depends">
    <a class="btn" href="#" title="<a href='#'>acl-native</a>
dependencies" data-content="<ul class='unstyled'><li><a
href='recipe-details.html?recipe=attr-native_2.4.46'>attr-native</a></li>
<li><a 
href='recipe-details.html?recipe=autoconf-native_2.69'>autoconf-native</a><
/li> <li><a 
href='recipe-details.html?recipe=automake-native_1.12.6'>automake-native</a
></li> <li><a 
>href='recipe-details.html?recipe=gettext-minimal-native_0.148'>gettext-min
>imal-native</a></li> <li><a
>href='recipe-details.html?recipe=gnu-config-native_0.148'>gnu-config-nativ
>e</a></li> <li><a 
>href='recipe-details.html?recipe=libtool-native_0.148'>libtool-native</a><
>/li></ul>">
    6
    </a>                        		
                        		</td>

The heading of the popover is the value of the title attribute. The
content of the popover (the list of dependencies) is the value of the
data-content attribute. We need some mark up in there, that's why in the
instantiation line we need to set the html property to true.

I've also made some changes to the default Bootstrap popover behaviour,
because out of the box you can have more than one open. That's also set in
main.js, which by the way needs a good cleanup. Hopefully I'll get to that
some time this week.

I hope this helps. If you have any questions, let me know.


> 
>
>This is my placeholder code. I could not find a style in "default.css"
>that made the "Depends On" bold and the background tinted (and "bold" is
>evidently not a good guess for a style name). I found that I had to use
>"<span>" because otherwise the "href" would be greedy and take a whole
>line by itself.
>
><li class="bold" ><span> <a class="get-info" name="{{recipe.name}}"
>href="{% url "recipe" build.pk recipe.pk %}">{{recipe.name}}</a> Depends
>On</span></li>
>
>4) Speaking of which, the design document indicates that the "Depends"
>and "Brought in by" should be displayed in sorted order, but that is not
>how they are iterated by "r_dependencies_depends". Should they also be
>sorted on the fly, or is there an alternate technique with the database?

I think once more the alphabetical order is important. Maybe Alex can help
with this question.

>
>Thanks,
>David
>