thechiselgroup / biomixer

BioMixer
http://bio-mixer.appspot.com/
16 stars 13 forks source link

UI and Tour Feedback #513

Closed everbeek closed 9 years ago

everbeek commented 9 years ago

Here is a collection of feedback on the Tour mechanism, the UI in general, and some things I found.

Tour related:

General UI:

everbeek commented 9 years ago

Looking at button stylings... capture capture2

everbeek commented 9 years ago

It appears that in order to affect actual SVG properties with CSS, it must be enoded into the JS or HTML source (or CSS), and cannot be referred to by a URL. there is a trick to deal with IMG tags and SVG URLs, so maybe there is a similar one for background-image CSS URLs (like I am using). That is enough acronyms for the day.

it doesn't seem like it. I will put off making the SVG buttons glow for now, since the fact they are icons will offer affordance. They do have the mouse cursor change on hover though.

everbeek commented 9 years ago

The tour step misplacement problem stems from commit eb7be1e. Fixing that before I look into the mode and tour problems I saw when Peggy was demoing it.

Although that is the commit at which the bug appears, I found that when I comment out the code that attaches the draggable SVG to the tour step popup, things resolve. So the changes in that commit interacted with the draggable stuff somehow? None of the changes in that commit look suspicious to me. This draggable thing is a good starting point.

I am not sure why it didn't show up in an earlier commit, but the critical piece of code is when the popup is made draggable via the JQuery-UI library. I often distrust this library, and was surprised when it didn't break anything for me. I am not sure whether I am relieved to be supported in my suspicions, or disappointed again. Anyway, I will figure it out.

Oh, it was simply the library overwriting the position absolute to relative, when it didn't seem to need to in order to function.

The problem that Peggy discovered was due to the binding of target elements at tour definition time. If the elements in the graph are removed (as in a mode change) then there is no valid object ot attach the tour to. I had originally wanted a library that supported functions to get target, because I anticipated this need. It clearly slipped past me that I still needed it. I implemented it in Intro.js to fix this problem. In the process, I learned more about Javascript scoping. A function I was attaching to objects getting shoved into a queue was getting...retrograde attached to elements already in the queue. I investigated it thoroughly, and although I don't understand why it was happening, I understand the pattern of behavior. Although the functions I was attaching were not working out, the properties of the objects were fine...maybe because they cam in pre-assigned? Anyway, to fix it, I had to take my code for attaching the function, and put it in a separate function.