New lab data browser for Eterna Medicine

  • 4
  • Article
  • Updated 3 years ago
As one part of the transformation to Eterna Medicine, I am going to be working with the dev team to create a brand new official lab data browser.  Hopefully it will incorporate the best ideas of both the long time Flash-based browser and the newer, but less used, HTML browser, as well as player-created tools based on Google spreadsheets, fusion tables and R.

I think we have a very good chance of making a much improved browser because there is now so much more overlap, and hence better communication, between the players and the devs.  To further this, I would like to give all interested players a stake in the creation of the new browser, even before coding starts.

With that in mind, here are two Google documents that I am making public.
  1. Eterna Medicine Data Browser Notes - These are basically thoughts that I have gathered over the last month or so, since I started thinking about what the browser could be.  You'll see notes and conversations from Eli, whom I engaged early.  But now I would like to open up the process to all players.
  2. Eterna Medicine Data Browser (Layout) - This is a more concrete representation of how I envision the browser being laid out, as I think this is fundamental to its utility.  I just finished this set of slides yesterday and showed it to the dev team.  Their response was very favorable, and they had some good suggestions for making it even better.  Now its your turn.
Both these documents are works in progress, to be updated as we progress.  The immediate issue I have before me is a challenge from Rhiju -- how can we use the data browser to help bridge the gap between Eterna as game and Eterna as science?  But you're welcome to comment on whatever issues you think are important to discuss while we're still early in the design cycle.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes

Posted 4 years ago

  • 4
Photo of Brourd

Brourd

  • 438 Posts
  • 79 Reply Likes
This is quite the ambitious undertaking. An interface with the data analysis capabilities of a basic spreadsheet program along with a flexible GUI and API to allow players the ability to modify and alter the browser with additional tools and code for whatever function they need.

While complexity such as this is not unheard of in games today (some games may require the juggling of dozens of statistics for high level play), it's not friendly to the average individual. To add on to that, the gaming aspect of Eterna is simplistic in form and function.

The player experience is to place base pairs in a predefined secondary structure in order to design a sequence that folds into that structure. Higher level play consists of an understanding of how certain mutations may alter the predicted free energy values of a sequence's target and resulting native fold prediction. Nowhere are players expected to want or need to analyze hundreds of attributes in order to "win."

So rather than making the current UI and feature set more complex, you should be looking at methods to simplify it. How can we provide the most concise presentation of the data in a visual format that would allow anyone to make an observation about a sequence and result?

The original flash browser and results view was a prime example of this done right. Instead of providing players with an insane amount of information in a series of adjustable columns and functions that had every experimentally determined SHAPE value available, along with error rates and information about the normalization schemes, it gave a results view with each base containing that individual information. As players requested more functions, the browser/results view became more complex.

Now, that's not to say that a more complex browser is not necessary, but perhaps that should be made available in another format, such as a downloadable piece of software, along with regular data/function updates.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes

Thank you, Brourd, for your observations.  They made me realize that I didn't provide adequate context for the post.

The primary purpose for this lab data browser is to find better ways to make sense of the enormous (and exponentially increasing) amount of data being generated in the lab.  It is not a replacement for the current Flash game/browser.  For example, it has absolutely no facility for creating designs.  When I said "official", I meant only that it will be an integral part the Eterna site (in contrast to the alternative SHAPE browser I wrote and shared with interested players a couple of years ago.)

A major initial thrust for the browser will be to integrate in a larger set of capabilities that lab participants have already found to be useful, but cumbersome because they require flipping back and forth between multiple applications and browser tabs.  This integration aspect is why I started with describing a framework for laying out the browser.  I think that getting the layout (i.e. how various views are organized and manipulated) will have a big impact on the ultimate utility.

But we are also looking for ways to draw the newer, or less engaged, lab participants into using the browser. For example, on Friday, Rhiju suggested that when a player gets an in-game message that their design results are back, it will include a link that takes them to the new lab browser, directly to a special tab in the main panel that is specifically designed to show how well they did, and reward them in whatever way we can think of.  (Sorry for the lack of details, but they are all TBD.)

Please keep up the conversation; I look forward to your insights. 

Photo of Brourd

Brourd

  • 438 Posts
  • 79 Reply Likes
So the aim of this is NOT a design browser (which is what the Flash and HTML browser are for, with some minor statistic sorting capabilities), but rather the creation of an official web-based data analysis application, wherein one can garner general statistics about collections of designs specified by the player using any number of defined sorting constraints, connected to all 70,000+ sequences and hundreds of attributes? In addition to this, the analysis app would also include software for other functions that are deemed useful, which are perhaps required to be open in other tabs or windows?
Photo of Brourd

Brourd

  • 438 Posts
  • 79 Reply Likes
And the aim isn't to replace any of the existing browsers, which would remain as they are? Does this mean that the barrier of entry to lab analysis will be made even greater (and not smaller), by the inclusion of a web-based analysis application with limitless capabilities that players would be redirected to?
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Yes, its purpose is to allow players to make better sense of the deluge of lab data (hundreds of thousands of designs, hundreds of attributes in the very near term), not to create new designs, and it won't be replacing anything.  But when I say analysis, I'm not thinking so much about complex statistical analysis.  Rather, the initial focus is going to be to make all the lab data accessible to players within Eterna (i.e. not requiring Google sheets or fusion tables) and do so in a way that makes the most sense to players (e.g. only download and display the small subset of data the player has indicated an interest in).  As an example, currently there is no decent way to compare Exclusion 3 puzzles across all synthesis rounds, even though that is obviously a desirable thing to do.

Re your question "...the analysis app would also include software for other functions that are deemed useful, which are perhaps required to be open in other tabs or window.", we want to have a plan for how that could be done, but it is not anywhere near the top of the priority list.  Much more important is to bring the functionality players most want into the browser, to reduce the need for multiple independent browser windows and applications.

As for the possibility of raising the barrier of entry to lab analysis, if that happens, I would say we'll have done a bad job of designing the browser.
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Comment back on this bit:

"As an example, currently there is no decent way to compare Exclusion 3 puzzles across all synthesis rounds, even though that is obviously a desirable thing to do."

I would really love that option. As is I'm regularly sitting with two windows open beside each other with two different rounds of the same lab. Which can get messy as I also want to consult the spreadsheet. Plus when rounds are together, we get the strength of using the sorting function on all the rounds data at once. We get the power to find sibling designs with no round border.

Photo of Brourd

Brourd

  • 438 Posts
  • 79 Reply Likes
I understand full well the draw of grouping all data into an easily accessible database. Indeed, it will be possible to make comparisons between designs located in various rounds under many possible names. It will also be possible to make individual comparisons between designs, and with a decent number of sorting options, be possible to measure the similarity between designs. However, an individual could do all these things in a spreadsheet program or Fusion table, no? The aim of this is not so much to make this data accessible, as it is to collect everything into a single database to make queries from, without the additional work involved for the player.

I'll say right now that this is not a bad thing, but it doesn't alter the player experience. The complexity and understanding necessary for basic statistical analysis remains the same, and the main individuals who will benefit from this will be those who would already do all of the work necessary to collate this data.

As an example, Eli could create a Google fusion table with every Exclusion 3 design within it, a fusion table for Exclusion 4, and so on and so forth.

My support for any new database browser will stem primarily from the attempt to simplify the data to the point that any individual can draw a conclusion from the result displayed, which would include both quantitative results and basic qualitative results. The more complex functions and queries will still exist, of course, but they would only be available for those who search them out, and not as the default state.
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Some feedback on the Eterna Medicine Data Browser (Layout) document


My immediate reaction is that it looks clean and well thought through.

On slide 6 I have a comment. I hope we are going to keep the column filtering right above the columns.

Column filters
 


The strength of working this way, is that I can directly see the effect of the columns I change and quickly change it, right on top of the column I'm adjusting. Having to open the side view for filtering will add an extra step + it will leave less space for the columns. I typically decide on what limits to set, based on watching the data directly. If the process is split from the action, it will not be as intuitive. It will feel more separated from the data. I like that I can see the direct action. With my eyes on both changing the numbers and the column where the changes happen.

Cut out from slide 6:
   

 

Comment on slide 8 (Display panels only when needed)

I very much like that. It works really well in fusion tables. I use it a lot, to get better space for Eterna and not showing my filtering criteria when not needed.

Panel sharing. Looks neat.


Alternative views

By the way, I noticed that design view and MS2 graph are under different sub headers. Mostly this is good, but I suspect that some will want them at the same time. I guess that can be done by how sliding the sides, with what you have already. So just a note. By the way, I think people may also want melt and dot plot like this. Perhaps under a sub header too? The melt and dot plot easy get in the way of the design when in same screen image.

Basically I expect that some will want to clone that window, to have some of its parts beside each other.

Did a couple of mock ups of what I can imagine people want to try out. I would find it useful, despite I'm not using the graphs much. But when I do, I like them to be present beside the design.   





Ok, feedback over. :)
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Thanks, Eli, for reposting your email here.  I presume you didn't include my replay simply because you didn't want to assume I wouldn't want it posted without my permission.  But no problem.  Here it is in full.

Thank you very much, Eli.  These are all things I have thought about, but that doesn't mean I've come to the right answer.  Which is exactly why I wanted to open the discussion up to players early in the design process.

Mobile devices: The dev team agreed that we shouldn't hobble the browser to work well with mobile devices.  On the other hand, they didn't want to write off the consideration of mobile entirely.  We had some discussion about what that might mean.  The best idea that came up was for a smaller screen, only show one panel at a time; the player would have a keystroke or touch gesture to switch between panels.  That shouldn't be too hard to implement, but it won't be a priority.

Column filters: I had actually come to the conclusion that separating the filtering (a la fusion tables) was an improvement.  My main reason for thinking that is that I'm often setting a filter on columns where I am not really interested in what the values are, as long as I know they lie within the range I'm looking for.  The best example would be the fold change error factor.  I hardly ever care what its actual value is, so its column is normally way off the screen to the right. It would be a real pain to have to scroll the whole table looking for it, just so I could set limits on it.  

A second, lesser, advantage is that the sliding panel gives me the choice of freeing up screen space to see more columns, while the selection boxes as implemented in the Flash browser always take up the space of 2-3 rows.

And finally, I envision additional options for filtering, beyond range.  For example, when filtering on the base sequence, we want the option of finding matches either only in a given range, or anywhere in the design.  And we want a choice between exact matching and approximate matching.  I don't see that working so well in the old style.

But having said that, there is no reason for saying that there needs to be only one way to do something.  If it turns out that the best solution is being able to filter in either of two panels, with the two panels being synchronized at each keystroke, we can do that.

Multiple detail panels: I agree.

Dot and Melt plots:  As they are implemented now, these are less useful for switches because they don't really reflect anything about the RNA except how it folds in the absence of any ligands.  And I'm not sure if there are even existing algorithms for estimating the wide range of ligands we're going to be looking at.  (Oh that reminds me - Rhiju said Eterna Medicine won't be limited to miRNA inputs and outputs, contrary to what I had gathered.)  So for now, at least, I'm thinking of them as being a possible future enhancement.  But at least we have a plan for how they could be handled -- as another tab in the detail view -- once we figure out how to create them.

Keep the thoughts coming as we proceed.  But unless you have something you want to keep private, why don't you post them in the forum thread, to encourage other players to be thinking about it, too.
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Thx for the comments!

A few more back.

On the melt and dot plot, it is no big priority for me. What we got works for now.

A few more arguments for the column filters on top on the columns.

For sequence search it is really important to have the search field on top of the columns as I often use the sequences in the sequence view list to decide what to limit to.

I like your thought on saving lines for viewing more data. If the search field fills less, it will only be a bonus. I think the web version did that.

Also I use these column fields to sort the data directly. I won't have to reverse score order in another window - I'm regularly watching the data from the upside down, starting with the bad designs. :)

My main point though is that I'm often resetting the filtering options during my analysis. So sorting directly over the column I'm watching, I can work directly with the data where I'm at.

I sometimes use the filtering boxes for screenshots along with the sequences when I share data analysis. So people can see what filters I set.

Some values I like fixed filtering for. Eg for things like cluster counts and error rate. Those I need not touch often, but would love to have globally assigned no matter what lab I enter. (Where they are relevant) But other filter values I wish to adjust depending on the lab I am in and even change in a specific lab several times as I change focus along as I analyse the data.

So perhaps some global filtering versus some local, in sequence view list filtering?
Photo of Brourd

Brourd

  • 438 Posts
  • 79 Reply Likes
Here is a question based upon Eli's comment of "global v local." How will the database browser be accessed? Will each individual lab have a link to the browser with only its designs loaded, or would one need to access the browser and then filter out the lab puzzle in question?
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
We're making up the plan right here and now, and it's not a question I had asked myself yet. How do you think it should work?
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
I realized that the two posts I put up today were really just an attempt to give some inputs on the challenge that Omei passed on in this post, about what can help bridge the gap between Eterna as a game (puzzles) and Eterna as a science (lab). So adding the links here.

Getting us ready for the Medicine labs
Getting us ready for the Medicine labs 2
(Edited)
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Getting players ready for the lab

One thing that I think will help immensely with getting newer players and players in general better prepared for the labs labs, is to put more weight on switch puzzles. I have already gone into more detail on how and why:

Mission Switch Badges
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Siqi Tian (a graduate student in Rhiju's lab) spent an intensive two weeks of implementation work and we now having something you can try out.  

The one thing that may not be immediately clear is how to control the left and right slide-out panels.



The panels can be popped out using the gray bar at the edge of the browser window.  (It will turn turn a pale orange when the mouse moves over it.)  If you click on the center section, which is a brighter orange, the panel will pop out and stay there until you pop it back in.  if you click anywhere else, the panel will pop out and stay as long as the mouse stays in the panel, but will automatically pop back when the mouse leaves the panel.  Once out, the panel can be resized by dragging the bar.

This is what I would call a "beta preview" release.  There is a lot of work still to do, and you don't need to report specific bugs (unless you want to.)  The main reasons of putting up such an early release is to get player feedback now, before we have invested so much effort that is hard to re-think fundamentals.  With that in mind, I would be particularly interested in:
  • What things do you really like, and don't want to go away, as we refine the browser?
  • What things do you not like, and hope will go away?
  • What changes, or additional features, do you really want?  I'm particularly interested in the question "What changes/additions would be necessary for this to become your primary way of looking at new lab data?"
As a reminder, in the foreseeable future, this browser will be in addition to, not instead of, the two data browsers that are already in the game.  Its immediate purpose is to support better analysis of the synthesis data from Johan's lab-on-a-chip experiments.

I'd like to give a big round of applause to Siqi.  His Eterna name is tian47.
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Hi Omei and Siqi!

A few thoughts back on the new browser.

I really like that all the columns from the fusion table are there. It looks like you guys are running it from a fusion table. :)

I also very much like the color for the base numbers, etc. Thx, Siqi! :)
 


I also like that some of the columns have gotten colors. Which means there is now a visual connection between some of the columns that I have trouble with determining what to use for.



I love that I can pick related labs and mix them. One thing that is a bit confusing, is that there is almost too much info. I don't need lab numbers, just lab name. I like the round thing, though. :)



I will rather that labs fill a bit less, just like the fusion tables. Like a simpler show. As long as there is a way to get that info somewhere else, I will like it go be hidden as it mostly won't be needed. Like below:


 

One thing that would be helpful, would be to be able to choose to see design and that graph thing at once.

 
 
One thing that I miss real big time, is the input boxes on top of the columns. To be able to putting in numbers and being able to adjust them on the go, and not having to adjust somewhere else to get to them. Each time I have to, is extra clicking and it breaks the flow. Having the column boxes is simply a far more flexible way of working.



Without the input boxes, I can't search for Designer either. I often search for designers that I know do well to study their designs in particular.

However I love if the input boxes are a way of setting a global preference.

Also the number input boxes fill a lot more than in both Eterna classic and the HTML version. And since we now got a lot more columns, this means more boxes and a whole lot more of scrolling.

Data Browser


HTML


Eterna Classic


Wishing you guys luck. You have gotten quite a bit done in a rather short time. This is already a far more interesting looking fusion table. :)

Eli



Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes

Thank you, Eli, for the feedback.  I'll comment on some of our current plans.

Re colors (and units, which you didn’t mention):

Siqi has made it very easy to make changes without modifying the source code.  So we’ll be interested in seeing what players find most useful.


This is our first iteration on the Lab Selection tab, and I agree it needs some work. One of the things we have to consider is that we need to support hundreds of labs, so a single list is not likely to work.  I’m thinking that players will have various reasons for choosing a set of labs to see at one time.  Various scenarios might be:

  • A single lab,

  • All the labs in a single synthesis round,

  • All the labs of a certain lab name (like Exclusion 3), or

  • An ad hoc selection of labs, like round 100 and 112 results of all A/B puzzles.


I would like to make the most common choices simple, but all choices possible, and we’ll be exploring possibilities.  If you have any suggestions, let us know.


Making it so you can see the 2D design and graph together isn't a lot of work, but I'm not sure how best to generalize that capability.   Specifically, how should the player be able to control what goes into a right-panel view?  I don't think one would always want to see them together, do you?  And then as time goes on, there will be other right-panel displays, like an actual microscopic image of the design clusters' fluorescence (which Johan says will be informative; I haven't actually seen any yet) or an interactive 3D model.  My current thought is to allow multiple right-panels to be slid out at the same time.  But I'm open to other suggestions, including special treatment for specific cases that are so common that they merit special handling.


Adding filter boxes to the column headings, like the two previous browsers, is still in the plan.  Since it is something we have a clear model for, it isn’t an area of uncertainty.  I’ve been putting more emphasis on starting with things we haven’t done before, because it may take longer to refine those.  But I will add that I actually like filtering in a separate panel better, for a number of reasons.  For example, with fusion tables, I will typically set a filter on something like cluster count, and then am not interested in seeing the counts any more.  In fusion tables, I can hide the column or reorder columns to move it off screen, but those each require using other UI components.  Having all those options available in one place is a big convenience for me.  But I see no reason in having to choose between those two styles of interaction. I envision supporting both, with the two always kept in sync.


Re the Display Selection tab, we started by using the HTML version you showed, and we’ve tried a couple of variations since.  The one you are looking at now  -- centralizing all the capability for rearranging the table (column hiding, column reordering, row sorting and filtering) in one place -- is one that fits my style of working well.  But I understand that different players will want different things. That’s why I’m eager to get as much early feedback as possible.


Thanks again, and looking forward to continuing the development together!
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Hi Omei!

Np.

I love that Siqi has made it easy for changing colors and units. This should be very helpful as a lot has changed with these later labs and I can only imagine it continuing.

One thing I'm considering is that it would be easier reading the numbers if the unit were at the column header. Although this will make the column header look more messy.

I do like the fine detail that Siqi has made the units and numbers of less importance weaker in color, so the important number stands out. And I like the green colored score. :)



Making it so you can see the 2D design and graph together isn't a lot of work, but I'm not sure how best to generalize that capability.   Specifically, how should the player be able to control what goes into a right-panel view?  I don't think one would always want to see them together, do you?

True also, I won't want the design and graph along each other all the time. Just as a choice. As it saves clicking when I can have both things on screen at once when I want to compare. Not that I have used graph a lot till now, but I would give it a try if it was easier. With your browser it is already far easier. I'm just lazy when I can see we can save clicks. :)

Multiple right sliding out panels sounds good. Having the graph and the design view in each their stack-able panel will be fine with me.

Adding filter boxes to the column headings, like the two previous browsers, is still in the plan.

I'm really happy to hear. I understand things take time to add and I think it is smart that you have prioritized rolling out the new stuff over the things that are more known. Your plan sounds great.

Re the Display Selection tab, we started by using the HTML version you showed, and we’ve tried a couple of variations since.  The one you are looking at now  -- centralizing all the capability for rearranging the table (column hiding, column reordering, row sorting and filtering) in one place -- is one that fits my style of working well.  But I understand that different players will want different things. That’s why I’m eager to get as much early feedback as possible.

Comment on this section. I think what Siqi and you have made is great, since I can add in numbers and it is far more flexible than both the Eterna Classic version and the even more flexible version that Diana made. I like what is there in the new version. The one thing I wish to see different is to get the input boxes squeezed more together, so it fills less and is easier to scroll through.

Quick mockup:


Looking forward to see what the microscopic image of the design clusters' fluorescence look like. :)

Thx for having me on board with this. I will try help point out what I think can get better. I like seeing it progress.
(Edited)
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
I like that mockup.  There's really no need to have "search:" in every little box.

Also, we're planning on replacing the None/Asc/Desc box with the double arrow icons from the column headings.  That will free up more space, too.
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Siqi alerted me to that the filter now updated:

Eli: Filter inputs are now in-line with column names in draggable blocks in left-panel of new browser demo: http://104.156.231.92

This is awesome! Big thx!

New view


I see that the labs selection is also simplified but unfolds with the extra details and numbers, when hovered over.

Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
*Tiny* nitpick. With the new hovering, when you go from bottom to top, it flickers a little due to the space that does not have a rollover.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
This comes from a generic feature, where things that don't fit into their default box expand when the mouse passes over.  You can see it in action for long design names, and it is very useful for displaying the design descriptions which currently only appear in http://104.156.231.92/old.)

Do you have a suggest for refining it?
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
Yeah. I'd make the rollover occur on a div that includes the whitespace, straddling it like this:
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Multiple selection

Something else new in this browser that might not be obvious:  you can select multiple designs, and each selected design will appear in the right panel, in the same order:

                  

To select multiple designs, you can use either Ctrl/Command click (to add or remove a single design) or Shift Click (to select all the designs in a range.)
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Thx for the image. I like this. :)

First two design I clicked to compare in the Exclusion 2 lab after setting cluster count limits, just happened to be two of my designs, one with MS2 gate and the other without. The one without scored highest.

I'm looking very much forward to the sorting function, as this is where I think this new option of comparing different designs, are going to show its full strength.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Drag and drop column reordering

Also, you can reorder columns by dragging in the main display (in addition to the left panel). Currently, this only works with the top line of the column headings

Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
Ok, I'm just going to throw out some initial feedback. I know that this is still a bit early, but I'll go ahead and mention my thoughts if it's of any help. I'm really excited to see this, and there are some really great things in here. Most of my comments are looking at how to keep things a little bit more compact and refined, as there's a lot there (which is great!) and it can be hard to parse through everything that is there.

  • It feels like there's an excessive amount of space in the header. Could this be trimmed down?

  • I'd like to be able to resize the column width. Some fields might want some extra readability, or others like this one I could stand to trim down to conserve space:

  • I personally have a little difficulty getting past the style and color shift of the added buttons. I find even just a quick hack of removing the gradients and making the background the same as the other buttons more comfortable:

  • I'd like to see the scroll pane inside a scroll pane removed. Just keep the buttons persistent across the bottom (or top, as the case may be-I'd just stay consistent).
     
  • I agree with the column options needing to be a bit more compact, but one thing I think would really help is if they could be categorized. This way, even if just the nucleotide/pair counts and percentages were in their own section, it dramatically reduces the list size, and enables a much quicker process of finding what you're looking for and what's available. In addition to this, because there are so many columns, I might also suggest adding a dynamic search bar, so as you type it in, you can just click on the suggested column info and it will bring that up directly. There could be two separate sections, a static one with the collections & search bar, and a second that has all of the active filters/info that will scroll (see my last point).
  • If you could, set collapsible to be on for the accordions, I find myself trying to do that and can't.
  • Could only a limited amount of designs be loaded at a time? Loading everything makes the interface quite slow to scroll, and it could be paginated, have a "load more" button, have an option for how many to display at once, etc. I was thinking about this for the regular browser too.
  • Perhaps add a little info on the columns on hover, or even better include a little question mark icon to click on or hover over (either on the column headings or in the selection panel).
  • Might want to add the project round if that's ever used again, I know it has been in some older puzzles.
  • Eventually, custom scroll bars like those in the web interface? Maybe? :)

Also, I a couple questions about the data itself.

What is the structure that's presented? I can tell it's not the default target structure (they're all different), and I'd assume it's not predicted fold (we're not using SHAPE). Is it the structure given by the energy model it was submitted with? I would personally like to have access to all of the things I've mentioned, though I assume that may be an issue of lack of data available from EteRNA. Also, what about free energy and melting point (for the various engines, as mentioned before)?

Will we be able to query this from scripts, and if so, when will we get at least the basic info for how to access? I could go figure it out, but it would be preferable to just have some basic documentation. Will all of the EteRNA data (not just switch cloud labs) be able to to be accessed through the same API (IE as opposed to fusion AND EteRNA's internal API)? It would keep things a lot simpler, and there is some data here that could be useful for the other puzzles as well.


Thank you SO much for your work, I'm really excited to be able to work with this as it moves forward!
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Thank you, LFP6, for taking the time to record your thoughts!

By and large, I simply agree with you, and will plan on addressing your concerns.  I'll just explicitly comment when there is something more to say.

Re scroll bars within scroll bars, it's definitely a no-no.  Siqi noticed and fixed some of the instances, and we will fix the rest by removing the outer scrollbar  I also want to move the inner scrollbars we've left out to the border and stylized so that they look like the other scrollbars:


Re long lists in the left panel, we definitely will need something more than one long list.  The top two accordions will actually be the place where the longest lists will be. We have more behind-the-scenes work to do before we're ready to really tackle that issue, but I'll plan on discussing it here before I spend a lot of implementation effort.

Re the accordion behavior, this is the default behavior of the layout framework I chose.  My first impression was similar to yours, but I've come to appreciate it because it actually saves clicks over manually collapsing and expanding each section independently.  Live with for awhile, and if you still don't like it, feel free to raise the issue again.

"Could only a limited amount of designs be loaded at a time".  Absolutely.  Here's a document that records my thoughts on the database and query design for the browser.   It's not totally up to date, but I think it is good enough that you can understand the intent.  Feel free to comment, either here or in the document itself.

As to the structures in the right pane, it is the predicted fold for each of the two states. Right now, it's using the structures that Meechl added to Johan's spreadsheet.  The near term plan is to calculate it on the fly using Nando's flash-based code.  (We're not using any flash in the UI, but for now, that's our only real choice for estimating foldings across all the various labs.) 

FWIW, the current implementation of the structures tab is rudimentary.  I expect it to get fleshed out quite a bit, and be interactive.  For example, I want to be able to mark one or more bases, and have the same bases marked in all the selected designs, both in the main list display and in other designs in the right panel.

As for free energy, melting point and the graphs that go with them, that's unclear to me at this point, given the different energy models we're dealing with.  I'm just going to postpone thinking about those.

As to the API, it will be public and documented (although I may try to lean on you for help there.)  I also hope we will support either JSONP or CORS, so that player-written tools don't have to be hosted on an Eterna server.  But that's outside anything I have direct control over.

Hope that, combined with todays player/dev chat, is responsive to this round of questions.

BTW, don't expect any major updates to the demo this week.  Siqi has handed it over to me for now, and I'll be focusing on pinning down the specifics of the database structure and API.
(Edited)
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
Great on the scroll bars, looks nice!

For the accordion, assuming you're using jquery, if you turn it on it will still auto-collapse if you click another item. In fact, I don't see a way to turn this feature off.

Thanks for the doc link, I will take a read a bit later. Limited loading would be good so there isn't so much lag.

To the structures and such, I think having access to all would be good, but for scripting purposes I just realized that with EteRNAScript it doesn't matter, as that data would be calculated, not sent from the API, so that's another unrelated issue entirely! Cool to the interactivity bit.

Would be happy to give a hand with documenting the API. Was hoping to eventually doing that with the EteRNA web one anyhow at some point. Outside access would be nice, I did notice it seems the RMDB will eventually have one with the info currently in the web interface but this data isn't in there.

Great to see some really good work being done!
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
Looking for clarification on two of the fields for the first query:

Does puzzle type tell you if it's a single state, standard switch, olgio switch, design-your-own, etc?

Does data type look at SHAPE vs MS2, etc?
Photo of t47

t47

  • 1 Post
  • 0 Reply Likes
Some quick response:

- We focused mainly on functionality for the prototype. So we did not spend much time to style it up. That's why the side-panels appears "ugly" and non-optimized much for display. That will be touched for future refinement, including "hover description" etc.

- We will consolidate the "display option blocks" into single line (in-line text inputs), as Eli and LFP6 both suggested.

- There is a link http://104.156.231.92/old  that is a retrofit to the "old/existing" lab browser with previous (pre switch era) lab data. Same JS library shared, only differs in custom column meta.

- Unfortunately, resizing column width is  a luxury of the DataTable plug-in in use. No official support yet. But I agree we should not leave large areas blank.

- Small screen does not work well with the current prototype, due to the nature of large tables and side panels. Zoom-out in the browser would help a bit, but it's known that tablet and IE will still suffer.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Getting 2D structures into the new browser

Nando has demonstrated for me a minor tweak to the flash app that makes it very suitable for displaying 2D structures in the new data browser.  But I can think of two different ways to to that, and I would appreciate some input from players before I proceed.

From early on, my intent has been to display the structures in the right panel, like this:


I think this works well with the rest of the new UI.

But in the legacy browser, comparison of structures is done differently -- you set the selection and ordering of designs in the list view and then switch to the 2D structure view.  There, you only see one design at a time, but can switch between designs with the U and D keys.

This specific feature of the legacy browser has been very powerful, and experienced players have come to love it, so I don't want to replace it with something new without giving other players a voice. With the tweaked flash app, I should be able to emulate the old behavior by opening up a new "window" (either an overlay in the main browser tab or in a separate browser window).  But both of those comes with disadvantages.

Which would you rather see?
Photo of JR

JR

  • 240 Posts
  • 20 Reply Likes
Can you go to the legacy view which is the design view I believe from the right panel view?
That might be the best of all worlds.
Are the highlighted in the left panel shown in the right panel as a scroll list?
Doing a great job by the way.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
For the first question, I think that's the same as what I have in mind.  I should have a prototype by tomorrow, and we can see if that's what you mean.

Yes, what is selected (highlighted) in the table (I think of it as the center panel) determines what is in the separately scrollable right panel. This is already implemented wrt the switch graphs; you can test it and see if it is what you expect.

And thanks for your appreciation, support and patience. :-)
Photo of JR

JR

  • 240 Posts
  • 20 Reply Likes
Going though the main page to old labs I get the old lab screens. Going though the
list -" Resources - Lab Archives" hangs on me right now. Will let you know when I am able to access the page, page looks like it's loading but never comes up.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
It seems that with multiple people updating the main site, the dev site data browser (http://www.eternadev.org/lab/data-browser.html) is more stable than the main site. Try it, and for sure let me know if you have problems there.
Photo of JR

JR

  • 240 Posts
  • 20 Reply Likes
That's what I figured. Looks good. How do I get that third right panel with individual
lad details.
Photo of JR

JR

  • 240 Posts
  • 20 Reply Likes
May be jumping the gun here but access to the third right panel could be a button to
top right hand side with the rest of the buttons so you can toggle and bring up and down the highlighted list in the middle panel in the third panel?
(Edited)
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
I'm not sure that I understand correctly.  You are suggesting a labelled button that has the same effect as clicking on the blue "handle" of the right panel?
I certainly agree it isn't great as it stands now; it's simply the default behavior of the layout library I chose.
Photo of JR

JR

  • 240 Posts
  • 20 Reply Likes
The blue handle is fine. I just did not see it. Thanks.
Photo of JR

JR

  • 240 Posts
  • 20 Reply Likes
Very nice. Are we going to be able to drop into the old detail screen so we can play around with the design? Before you go any further I would walk Eli through the screens, I would call him the power user of the bunch and would feel comfortable
with his direction.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Don't worry; Eli's been a (quiet) partner in the data browser development from the very beginning.
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
When looking at the details of a selected solution, there are a lot of fields that say not in query being that they weren't selected for columns. I think it would make more sense to either omit them all together, always include them in the query but not necessarily put them in the table, or do another query for that information upon selecting the individual puzzles.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
I'm certainly open to changing it.  Here's my rationale for the way it is now.

Although you don't see them yet, there are going to be tons of columns available.  (I think the last A/B project has over 100.)  I'm trying to find a balance between overwhelming the user with data (which brings with it slower downloads and more sluggish table interactions) and overwhelming the user with choices, including but not limited to selecting columns to download.  As it stands now, there are only two columns -- project ID and design ID -- that are mandatory to making the browser function.  I could just as easily simply omit the Designer label (for example) if the user hasn't selected that column for download.  But then then the user doesn't get any hint that the browser could display the designer if desired.

This particular case may be moot at the moment, because I'm changing the content of the 2D display to use Nando's embedded flash app.  But the same design decision will come up again, sooner more likely than later.  So just hold that thought for a little.
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
As I mentioned at one point, what might help is to split up the columns into sections, either to select everything in the group or to be able to just quickly find the right thing and keep the interface clean.
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
Btw when can we expect to see a stable/"production" API to access this data? I know at least Jen would like to access some of this data for DPAT, and I'll be creating a toolset for that so I'm curious on what the timeline is.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
All the data is being stored in Google fusion tables, which brings with it a very flexible, well documented and stable API. 

Here's the URL for the UI view of the current data table:
https://www.google.com/fusiontables/DataSource?docid=1C2-BNH1IHlp-dg8R_iE1RAxZ9zvKVeJSCGwUWGfw

And here is a sample API query:
https://www.googleapis.com/fusiontables/v2/query?sql=SELECT%20Project_ID,Puzzle_Name,Eterna_Score,Se...

But if you click this link, you'll see that tables that are accessed regularly require a "developer key" for the API.  These are free; you just need to register as a Google developer and request one.

About the only thing likely to change between now and full production is the addition of rows and columns (which is backwards compatible with any existing queries) and the fusion table ID.  If Jennifer or anyone else wants to start using the API right away, they should let me know so I have an easy way to communicate it if and when this happens
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
Cool. I have worked a little bit with Google APIs before so I know how the system works. I was under the impression that Fusion Tables was only temporary and that all the data would be migrated to EteRNA's servers and accessed via that API. Is all the "old" data going to be ported here btw? That would make it significantly easier to pull that data (better API and no need to look in multiple places).

I'm hoping to start developing with this myself soon.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Originally, I single-handedly chose to use fusion tables for development.  So at that time, it was just an interim scheme.  But so far they have held up well, and we're going to continue to use them for now.  They definitely have some advantages, but we'll need to build some better tools for getting data into them, and get more experience with them, before we can decide to stop loading new synthesis data into the Eterna database.

Would you be interested in helping build the tools to populate the fusion tables? (There are actually a number of metadata tables in addition to the data table itself.) Right now, it is up to me, and I have to split my time between that and the browser itself.  Caleb has expressed interest, but he's tied up right now with other aspects of Eterna Medicine.  One of the real advantages of the fusion table solution is that it really can be an open project; there's no inherent need to involve the Stanford bureaucracy in order to participate.
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
I'd love to help move this forward if I'm able to. Could you provide some more details on what specifically is needed?
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Super!  Let's see what we can work out.  Maybe at some point we'll transfer to a private discussion, but I would like to take this opportunity to post more publically, in case others also want to help.

Here's where things stand now:

The potential three sources of data for each synthesis round are
  1. The Google spreadsheet containing Johan's experimental results, and
  2. Additional information from the Eterna database (a bunch of IDs, designer name, design title, description and comments, ...
  3. Extra columns computed by players, such as dot-bracket structure strings, Energy estimates, specialized statistics, etc.  In the past, it has generally been either Meechl or I who have produced these in the form of another Google spreadsheet.
jnicol has been providing Johan with some of the Eterna data for some of the rounds, but that has been erratic, so that data is not necessarily present in the data browser.  I'm currently working with John to create a public Eterna API to get everything we need in a routine way.

I have been adding new projects to the fusion table by using the Fusion table UI to append new project data sets using a CSV file.  The complication here is that for this to work, the CSV file has to have the same columns, in the same order, as the fusion table.  Each of Johan's spreadsheets, however, has a different set of columns (because each project results (potentially) in a unique set of measurements.  So each spreadsheet has to be curated for non-canonical column names and new columns. Putting aside the issue of new column names, the main task is to detect and change any non-canonical column names, reorder the columns in the order of the fusion table (including columns of blanks for fusion table columns not being measured in this project) and adding all the spreadsheet rows to the master fusion table data table.

Based on my experience of doing a few labs totally manually, I think the first thing to automate (biggest bang for the buck) is to use Google spreadsheet scripting (Javascript + the spreadsheet API) to do the routine parts of the job of getting one of Johan's spreadsheets into the proper form for uploading into the fusion table.

Is this something that would interest you?  I've left out a lot of details, but I hope that's enough to convey the general flavor.
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
I'd certainly be happy to give it a shot.

On a side note, it also might make sense to have something in the EteRNA API that would be updated with the link to the results in sheets too.
Photo of Meechl

Meechl

  • 81 Posts
  • 27 Reply Likes
Omei, if there are any columns I usually add that you'd like help adding, let me know.
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
I do have one question. Where do you want to run the script from, and where should it save the result? Should it be accessed from a sheet, and the sheet updated? Should it be a web app where you paste a link to the original and it saves the result to your Drive? There's options.
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
And more specifics of what needs to be done would be good, so I don't miss anything (ie what formatting needs to be done, what needs to be pulled from EteRNA, how new columns should be dealt with, etc)
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
@LFP6: Let's start simple and work our way up.  I've created a spreadsheet Eterna browser: merge design columns from two sheets.  I don't have an email address for you, so follow the link and then request that you be added as an editor.

I think we should start with a script bound to the spreadsheet, i.e. once you can edit the sheet, proceed to Tools/Script editor.  I'm assuming that at least some of this will be new to you, so I'll suggest this for a first pass:
  • Find the DesignID column in each of the first two sheets and sort each sheet by that column.
  • Verify that each sheet has exactly the same set of DesignID values.
After that, if you want to, I'll specify the next steps.  Or, if you want, you can take the lead and do everything you think is needed to robustly merge all the data from the Source sheet to the Destination sheet and then I'll review it.

Basically, I'm thinking of this not only as a producing a useful tool, but also as a way to find out how we can best collaborate on the larger task.
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
That makes sense.

When looking for the field, should it be dynamic somehow, or should I be hard-coding the source and destination values?
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
@Meechl:  Thank you for the offer.  My emphasis at this point is to develop the process for routinely and quickly getting all of the routinely desired data from Johan's experimental spreadsheets, plus the corresponding Eterna pre-experimental data from the Eterna server, into the data browser's fusion table.  If we routinely want more columns, we should add them at the source, e.g. ask Johan to include them in his spreadsheet.

But I will really appreciate your help when it comes to "filling in" data columns for projects that are entered before we have the routine down.  I'm not sure exactly what that is going to entail but if you have the time and interest when that time comes, I'll accept!

(There's also the issue of being able to incorporating ad hoc "external" data into the data browser's table, but that's even farther in the future.)
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
@LFP6: For this application we'll always be matching on the design ID.  But looking at https://www.google.com/fusiontables/DataSource?docid=1j1vqL-JixKkKCw0QoVBSeLsbOfpsZ05Tbw4QFZlb#rows:..., I see that I decided on the canonical name Design_ID, not DesignID.
Photo of LFP6

LFP6, Player Developer

  • 600 Posts
  • 108 Reply Likes
Not sure if I was completely clear. Should the column name I'm looking for in the source and the destination be hard coded, or should I be looking for some pattern, not assuming that the column names will be a particular value?
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
It can be hard coded to "Design ID", and the sample sheet I made be fixed up accordingly.

Of course it always good practice to have a constant like this defined only once in a program, so there is only one place in the code to change if that is called for.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
OK, I have a very rough prototype of embedding the flash-based 2D structure in the new browser.  It is rough enough that I don't really want to even install it on eternadev.org yet.  But I think a screenshot will serve to clarify the choices we might have.



You'll see that I have selected four designs, and there are now four instances of the flash code running in the 2D Structure tab of the right panel.  These have almost all of the interactiveness of legacy view, the main absences being access to the legacy design list and puzzle submission.

An alternative is to have just one instance in the right panel, and use keystrokes to move between the selected designs.  This user interaction would be more like the legacy flash app.

I think I like being able to see multiple designs at the same time.  What do others think?

(If you look closely, you'll see oddities in the screenshot, like the puzzle names in the flash windows not being right, and there being nothing in the right panel that tells you the design name of each flash instance .  That's all part of what makes it a rough prototype.)
Photo of JR

JR

  • 240 Posts
  • 20 Reply Likes
I like the multiple views but still would want the ability to futz with it in puzzle submission mode.
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
Thats an important point you bring up there, JR.

One of the greatest strengths and things that is important even after a lab design has gotten result, is that it can still be changed to see what it would do. That's an active way of checking ideas when analysing. Plus it is also what I do when I decide on to make a mod of a past lab design for a new lab. I simply play with it to see if certain things work. And then I copy the sequence to the active lab either when I'm done modifying or think the design could be interesting modifying.

Which reminds me that it would be awesome if that process is somehow supported. Like when watching past results and wanting to modify if we could beam the lab result that we want to use either modified or intend to modify, directly to the new lab  - if such a lab is open. That would save a lot back and forth between different screens and I even suspect it will make more players use past results for designing.

The direct interaction with the puzzle is one of the strongest features. The design is not just a static image. It being interactive is both a toy and tool.

Now the image above shows 4 design. Would an single design view show both/all states?

Also we need to be able to shift energy model. (Not all puzzles need that) I know I want it directly in the design viewer - because this allows me to blow the viewer to full size - and "D" my way through a huge trail of designs with nothing but the design seen. But still have the ability to change settings when I think it will be better for the individual design to be viewed in another model.

Omei, I will like to be able to see multiple designs against each other. That would be rather cool together with sorting. So keeping the starting point as one window and moving through the variations below.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
I got some help from Nando, and I've now put up a (still rough) prototype at http://www.eternadev.org/lab/data-browser.html.  

The first thing you need to know is that you must select the puzzle id and sequence fields for download; there is no enforcement of that.  And there is a major irritation in that resizing the right panel completely reloads the flash app.  But having something that actually works will let us see whether we are all wanting basically the same thing (it seems like it) and what needs refinement before we can check off this item from the showstopper list.
Photo of JR

JR

  • 240 Posts
  • 20 Reply Likes
Latest changes to "2d Structure" tab look very  good.
I was going to ask for a 3rd tab with "Dot Plot" so I could see a list of Dot Plots for my multiple selection but I can do that manually now with the interactive 3rd window.
To get rid of the end user once (haha) and for all I used to do one last thing and that was to front-end the application with a entry screen that let the user save data selection (into a comma delimited string) by user "name/their title" so they could come back later and "fetch" their study so their  "I thought I saw something back there" moment is never missed. I wrote it as an independent program that "calls" your main program and then windows a request to save when ending the application. Making it a separate program means able to use it elsewhere.
(Edited)
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
This sounds cool, JR!  The notion of easily capturing the essence of an investigation you might want to return to later is really powerful.

I'm not sure I understand what you did and how, though.  This is something you did that worked with one of the Eterna web pages?  If so, what did you save in your CSV file, and how did you extract that data from the application.  Or were you presenting this as a general idea that we could incorporate into the browser?
Photo of JR

JR

  • 240 Posts
  • 20 Reply Likes
This was with another language and another application and for a large company. Don't know if you can capture flash screen parms or how much work it would be. Since you wrote the screens you might be able to say... that's easy or that's going to be just too much work. If it's not easy them I
would skip it.
Photo of Omei Turnbull

Omei Turnbull, Player Developer

  • 968 Posts
  • 304 Reply Likes
Progress update: In addition to improvements in the handling of the interactive 2D structure view, I have added a right-click menu for copying to the clipboard either the sequence or a legacy URL for the selected design.
Photo of Eli Fisker

Eli Fisker

  • 2222 Posts
  • 483 Reply Likes
This reminds me that we have no options for casting or deleting votes. Would be practical if the voting column already there could get a box for a tick of.