Promethease UI Update

by Steve Burns Published

Problems

I have used Promethease for over a year now and absolutely love it.

I only have 2 or 3 complaints. So rather than just complain I took time to fix at least one of these problems. Or at least I attempted to.

Problems with Promethease

  1. Medication was removed
  2. No way to “bookmark” SNPs
  3. Essentially able to only view 1 SNP at a time (maybe 2 if you are lucky)

So, I took some time to partially fix the last one.

All I did was modify parts of the CSS to make the IU hide certain elements and shrink others.

Changes / Features

  1. Able to see at least 4 SNPs at once (possibly able to see more depending on how tall you make the web browser window)
  2. Screen must be at least 1000px. (basically, full screen for most people)
  3. Hide certain UI elements
  4. Shrink UI elements
  5. Scrolling within each SNP if its card is too big
  6. Only show CEU population group
  7. Scrolling within various elements for each SNP.

Upcoming Changes

  1. Change CSS for elements to use CSS Grid for better flexibility and better appearance.

Before

Promethease – BEFORE

After

Promethease – AFTER

Use / Installation

  1. Open Chrome or Firefox install the Styler add-on.
  2. Go to promethease.com
  3. Copy the CSS from the link listed below.
  4. Click on ‘S’ icon in your browser (from the Styler add-on)
  5. Paste the CSS in there.

CSS

Download this file: promethease-ui-update
OR
Copy the code from below.

/* ITEM: WHOLE page */
/* ACTION: Ensure menu is hidden when not in use and fix minor whitespace issue. */
html {
  overflow-x: hidden;
}

/* ITEM: Filtering Menu 'X' */
/* ACTION: Make the X brighter and more well defined since it will be used more. */
.close {
 color: red;
 filter: none;
 opacity: 1;
}

/* ITEM: Main container of results */
/* ACTION: Expand to whole width of page. */
div.tab-content {
  width:100%;
}

/* ITEM: Subcontainer */
/* ACTION: Expand to whole width of page.  */
div.boxresult.row {
 width:100%;
}

/* ITEM: SNP information card */
/* ACTION: Reduce size of card and add padding around it. */
div#genoslist div.badRepute, div#genoslist div.noRepute, div#genoslist  div.goodRepute {
  display: -webkit-box;
  width:calc(23% - 25px);
  float:left;
  clear:none;
  margin: 15px;
  padding: 10px;
  max-height: 500px;
  height: 100%;
  overflow-y: scroll;
  scrollbar-width:thin;
  resize: vertical;
}

/* ITEM: Size of contents inside of SNP info card. */
/* ACTION: Expand the size to whole length of card. */
div.boxresultcol1.col-md-6, div.boxresultcol2.col-sm-4{
  width: 100%;
}

/* ITEM: Images within SNP info card. */
/* ACTION: Limits the size of any images for a SNP */
/* 
NOTE: 
Likely applies to all images, but unsure since the item is titled genoimage. 
*/
.genoimage {
  max-height: 150px;
  width: auto;
}

/* ITEM: 1st text area of a SNP - After ID, before GRAY text boxes. */
/* ACTION: Limit size / height */
/* 
NOTE:
If you want more than change the number after
	-webkit-line-clamp:
*/
div.boxeffect, div.gsboxeffect {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

/* ITEM: GRAY Text boxes */
/* ACTION: Move table to be below main contents and limit size / height */
text area and above Frequency data. */
div.rstext {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: scroll;
  scrollbar-width:thin;
  resize: vertical;
  left: 3px;
  margin-left: -5px;
  width: calc(100% + 25px);
} 

/* ITEM: Population frequency bars */
/* ACTION: Limit height of area */
div.ct-chart {
  max-height: 29px;
  display: visible;
  overflow: hidden;
}
/* ITEM: Labels of DNA files. */ 
/* ACTION: Limit size of labels displayed. */
.comparegenolabel {
    word-wrap: normal;
    float: left;
    overflow: hidden;
    height: 20px;
}

/* ITEM: Table rows inside each SNP card. Below main text and below population data. */
/* ACTION: Adjust the number of rows in the table. */
/* 
NOTE: If you want to edit the number found after the  n+
So to display more
	MORE than increase the number
	LESS than decrease the number 
*/
div:nth-child(n)>table:nth-child(1)>tbody:nth-child(1)>tr:nth-child(n+14) {
  display:none;
}

/* ITEM: Honestly I forgot I am not sure */
/* ACTION: Adjust margin. */
div#filters>table.table.table-condensed {
  margin-bottom: 5px;
}

/* ITEM: ClinVar area at the VERY bottom of the SNP info card. */ 
/* ACTION: Shrink size and add scroll bar. */
div.clinvar-label.col-xs-12 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: scroll;
  scrollbar-width:thin;
  width: 90%;
  height: calc(100%-10px);
  left:7px;
}