UI View Boxes

Sorry to interrupt, but I’m in the new browser and highlighted one sequence, called up the graph on the right hand side.  Clicked on another line calling up another sequence with the graph.  Change to 2D and the structure never loads.

Thank you, whbob.  I can reproduce that, which means I can fix it.  Stay tuned.

@Omei - Re the Puzzle and column selection.
Ok stopgap measure for the initial release. Np

“ultimate solution for the bigger question of “How do I quickly find the data I am interested in”?”
I’ll make another goggle doc or add to the Viewing Lab Archive faster page, in there could brainstorm ideas with the pro’s and con’s of those.

“the legacy code represents the past, not the future, of Eterna”
Agreed, The example was a possible stopgap measure only.

@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.

@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.

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.

@matStarted Data Browser Brainstorm needs sharing privileges.

@Omei - Oops - Should be able to view and comment now.
Haven’t added much text into the doc yet.

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?

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.)

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.

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. : )

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.

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.

1 Like

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

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

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 :slight_smile: