UI View Boxes

  • 4
  • Idea
  • Updated 3 years ago
https://drive.google.com/open?id=1_4OY-hS3b8GROBgnrxTZgEsqETLx4rJr4s7kNXuCL5U

 UI View Boxes
 
We have been highlighting lab design list for analysis in our little group and I thought it would be useful in game for others too.

I have been brainstorming some view oligo inputs views options for the lab list with input from Eli. Using the energy modeling to show oligo inputs placement in the sequence.

I have asked other long term players for feedback/options to refine the view/ideas, like I have in the past for other ideas.

Any feedback would be great. I'm happy with any reply of what you think of those if any were Good, Bad and What was I thinking.

Mathew
Photo of mat747

mat747

  • 130 Posts
  • 38 Reply Likes

Posted 3 years ago

  • 4
Photo of Brourd

Brourd

  • 437 Posts
  • 79 Reply Likes
I imagine the difficult part here is that MFE structure predictions are not saved (*disclaimer: this could have been changed recently, but I wouldn't know).

Would the goal be to have every submitted sequence be parsed and compared to the sequence of the oligo to find the best matching sequence?
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 966 Posts
  • 304 Reply Likes
It's true that the MFE predictions aren't currently being stored, and I doubt they ever will be for the legacy browser.  But I think it is a an important feature for the new browser, because filtering on predicted substructures will be very powerful.  So they will get there.  

Unfortunately, I can't promise it quickly. :-(
Photo of Brourd

Brourd

  • 437 Posts
  • 79 Reply Likes
Can you promise it slowly? And how long would it be before implementation?
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 966 Posts
  • 304 Reply Likes
I'm glad you asked that, Brourd.

One of the advantages of the new browser is that there are no hard-coded assumptions about what columns can be put into the database.  In fact, its database already has fields defined for four 2D structure strings.  So the issue is not code to support the structures, but in getting the structure data into the database.

This was an issue for the (pre-browser) FMN lab fusion tables as well.  In that case, Meechl volunteered to do the legwork of manually running a script on Nando's dev server multiple times and, along with other data, created a spreadsheets of "extra" results.  I then merged that data into the fusion table that Eli or I had previously created and made it public.

The situation is basically the same for the new browser database, but the details differ.  Nando's script that Meechl used doesn't handle RNA inputs or outputs, so we have to develop a new procedure.  Part of that involves Javascript coding, i.e. creating a utility that loads the Flash app, queries the Eterna server for the set of puzzle designs, submits each design to the Flash app for folding, gets back the results, and enters them into a spreadsheet.  But that's a one-time effort.  The on-going effort is actually to go through that process of running the app and verfiying the results for each puzzle, both for new labs as the data is released and old ones as they get added to the database.

The time I have available right now is split among a number of different tasks:
  • Addressubf current browser issues, from outright bugs to cosmetic improvements,
  • Adding features that long-time players feel are necessary for the new browser to be "good enough" to make the switch from the legacy one.
  • Adding URL-directed invocation capabilities.  By this, I mean making it so that a properly constructed URL can load the browser with specific set of designs, columns and capabilities.  The tutorials have a couple of simple examples already, but Rhiju is eager for a lot more generality, so that links to specific data can be an integrated part of the game UI.
  • Add entirely new browser capabilities (which wasn't really feasible with the flash code.)
  • Get more data into the new browser's database. This covers both new projects and filling in "holes" (like the 2D structures) in the data for the projects that are there.
It is because of all these different things that I really can't give a timeline for anything until it gets to the top of the priority stack (which is always changing.)

Having said that, though, if a player were to say that they would take on the routine process of extracting the structure data for each lab, I would be very motivated to put the coding of the needed utility very high on my list. (Say by the end of next week.)
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 966 Posts
  • 304 Reply Likes
@Mat, I think there is real potential here.  I added a comment to the doc saying I would be interested in seeing what it would look like to combine the traditional coloring of bases with outlines showing structure.  I decided to spend a little time experimenting myself:

This is just a rough cut; the details aren't consistent.  

It would certainly take some time for a player to look at something like this and grok the full meaning. But even without that, I suspect that a just a glance will say something about how promising a design is, because good designs are more likely to look "tidy", while ones that look "messy" are likely not to switch well.
Photo of LFP6

LFP6, Player Developer

  • 598 Posts
  • 108 Reply Likes
This is a reallydelayed reply, but here's what I'm talking about when I say change the alpha instead of the hue, using the code you provided (same color, just a different alpha):

$("tbody tr .sequence").each( function() {
    var n = $(this).text().indexOf( "CAGUACUGA" ); 
    $(this).find("span").each( function (index){
        if (index >= n && index <= n+18) { 
        this.style.backgroundColor =  "rgba(153,153,255,0.25)";
        }
    })
})

Of course, this approach doesn't work on legacy browsers (pre-IE 9), though Eterna currently uses the trans-panel/trans-panel-bg classes with an extra div to achieve the same effect throughout the rest of the site.
Photo of LFP6

LFP6, Player Developer

  • 598 Posts
  • 108 Reply Likes
This is a really delayed reply, but here's what I'm talking about when I say change the alpha instead of the hue, using the code you provided (same color, just a different alpha):

$("tbody tr .sequence").each( function() {
    var n = $(this).text().indexOf( "CAGUACUGA" ); 
    $(this).find("span").each( function (index){
        if (index >= n && index <= n+18) { 
        this.style.backgroundColor =  "rgba(153,153,255,0.25)";
        }
    })
})

Of course, this approach doesn't work on legacy browsers (pre-IE 9), though Eterna currently uses the trans-panel/trans-panel-bg classes with an extra div to achieve the same effect throughout the rest of the site.
(Edited)
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Mat wished to make a comment here but is having trouble logging on the forum, so I'm posting it for him.

He told me that he started to take a look at Whbob_B/C-dec_V1`s designs in the lab and was getting it to a form in how he would like to review the results. He has made up a document with introduction to his idea for it. So here it comes:

Permutations of Combined Fragments/Sections
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Mat wished to make a comment here but is having trouble logging on the forum, so I'm posting it for him.

He told me that he started to take a look at Whbob_B/C-dec_V1`s designs in the lab and was getting it to a form in how he would like to review the results. He has made up a document with introduction to his idea for it. So here it comes:

Permutations of Combined Fragments/Sections
Photo of whbob

whbob

  • 190 Posts
  • 57 Reply Likes
I was wondering what was interesting about my B/C-dec_V1's since the new browser shows 30%'s for those submissions.  I see that R104 rev.3 spread sheets have been recalculated, improving those scores.  Players who use the new browser should also review the latest spreadsheets for changes.

I like ( but have not yet completely understood) how to use Mat's paper.  Looking forward to more info.  Thanks :)    
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 966 Posts
  • 304 Reply Likes
@all: I've been thinking about the possible advantages of basing something like this off a graphical, rather than textual, representation.  Consider the circle diagram in this image. 



Here, the bases are arranged in order around the perimeter of a circle, and arcs are drawn between bases that are paired.  I've seen this representation before, but never saw any advantage over the 2D structure graphs we're accustomed to for viewing a single folding.  

But I'm thinking this representation may be useful for visualizing switches, where we want to compare the foldings among multiple states.  In the simplest case, we could simply draw the pairings for all states in one circle, using a different color for each state.  Overlaying four states at once might be too cluttered, but last night I ran across a visualization technique that uses an additional hierarchical relationship (which an RNA foldings has) to bundle lines, like this.

Any thoughts?
Photo of whbob

whbob

  • 190 Posts
  • 57 Reply Likes
With this circular diagram, having the ability to step from blank to state 1, 1+ 2,1+ 2+ 3,1+2 + 3 + 4 ? I think I like it :)  Then, add the ability to step through several player designs viewing the same state in each?  I'd like it evermore :) 
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 966 Posts
  • 304 Reply Likes
@whbob, @mat - I consulted with Nando, and he offered a possible fix for the 2D- Structure not fully initializing when it isn't visible.  I tried that, but it didn't seem to work.   However, the Chrome debugger wa acting up, so I rebooted my machine, and then it worked.  So the problem has gone away for me, at this time. What I don't know is whether it is the code change or my rebooting that "fixed" it.

In any case, I have uploaded the changed code to the dev site.  If you can still reproduce the problem, try rebooting.  And let me know what you find.

Thanks.
Photo of mat747

mat747

  • 130 Posts
  • 38 Reply Likes
@omei - 2D Structure still didn't display maybe I tried the wrong Devsite ?
 Running Windows 10 on desktop, still try laptop with Windows 7

Started Data Browser Brainstorm only one image so far.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 966 Posts
  • 304 Reply Likes
The dev URL is http://www.eternadev.org/lab/data-browser.html.  It works fine for me.

Did you try rebooting your machine?  Based on the fact that there are other flash app features (like the base shifting tool, and zooming with my mouse wheel) that will stop working for me, and won't start working again until I reboot my machine, I'm pretty sure that there is some resource leak in the flash app that the OS/browser combination can't detect.  This may be another case of that phenomenon.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 966 Posts
  • 304 Reply Likes
@mat: Started Data Browser Brainstorm needs sharing privileges.
Photo of mat747

mat747

  • 130 Posts
  • 38 Reply Likes
@Omei - Oops - Should be able to view and comment now.
Haven't added much text into the doc yet.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 966 Posts
  • 304 Reply Likes
Thinking about how to efficiently compose individual kernel attractions into a complete solution, I took a design I had already submitted and tried creating a visualization that reflected how I think of it. Here's the result:


Conventions I used:
  • The design sequence (5'-3' order) is in the middle row.  I omitted the static stem.
  • C', R' and A' are the oligos, with the ' indicating they are in 3'-'5 order.
  • Kernel attractor bases, i.e. design bases that form distinct stems in multiple states, are underlined along with their oligo partners.
  • Extended attractors, i.e. the kernel attractors plus the additional bases needed to balance the energies to satisfy each state, are bolded.
  • The orange/cyan background coloring denotes purine/pyrimidine bases.
  • Design bases that don't bind in either state retain their Eterna background colors.
  • Gray arcs denote stems formed exclusively by design bases.
I can envision this not only as a way of visualizing designs, but as a way of creating them.  For example, one might select a set of kernel attractions (which is what I do now) and then interactively slide them back and forth, either specifying design base assignments and having the application evaluating them on the fly, or having the application interactively offering suggestions.

What do others think of the visualization?
Photo of bekeep

bekeep, Learning Researcher

  • 98 Posts
  • 20 Reply Likes
I am probably not the person you were hoping to hear from, but I really like this approach and would love to try designing with it.  This representation makes the important factors of a design more far more apparent.  The only feedback I have right now is on the visual importance of these factors.  Is the purine/pyrimidine distinction the most important?  It visually dominates the representation - a little trickier to see the kernel attractors.  It might also be helpful to display the unbound bases of the oligos in the same way that you display the unbound bases of the design sequence.

(Keep in mind, this is coming from someone who has more experience failing than succeeding with these designs, and little experience generally.)
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 966 Posts
  • 304 Reply Likes
Your observations are very much appreciated, Ben.

As for using coloring that emphasizes the R/Y class instead of individual bases, I used to do the latter. But take a look at https://docs.google.com/document/d/1IV3om4-qMY5xZ1uYa7kFF16qdfSVqj6t6dgzIy_cmik/edit#heading=h.jkxxf..., where I tried both.  (This document is not about solving puzzles, but finding kernel attractors to work with. But the two are very closely related, at least with the way I design switches.) I discovered I could visually process the suitability of an alignment much more quickly with the two colors than the four.  

Even with player switch puzzles, my approach is to first construct a rough solve in R/Y classes (while in target mode) and then fine-tuning the solve by changing pairs to R/Y an R/Y equivalent.  (For example changing a GC pair to an AU pair to weaken an overly strong folding.)

I'll be interested to hear if that changes your perspective some.
Photo of bekeep

bekeep, Learning Researcher

  • 98 Posts
  • 20 Reply Likes
That makes a lot of sense.  It's a very different way of thinking about things (different, at least, from the way I was thinking about things).  Visually, the individual base colors are also more distracting.

Seems like a very powerful tool that let's people think about the problem in far more productive ways than the standard Eterna representation.  Going to try solving a few puzzles this way. : )