Adds "P-Value Star Rating" chart to pathways table and search dialog.

src/client/components/network-editor/charts.js

@@ -4,8 +4,12 @@ import PropTypes from 'prop-types';
 import { makeStyles } from '@material-ui/core/styles';
 
 import HSBar from "react-horizontal-stacked-bar-chart";
+import StarIcon from '@material-ui/icons/Star';
+import StarOutlineIcon from '@material-ui/icons/StarOutline';
 
 
+// ==[ Up-Down Horizontal Bar ]==============================================================================================================
+
 const useUpDownHBarStyles = makeStyles(() => ({
   parent: {
     position: 'relative',
@@ -80,7 +84,6 @@ export const UpDownHBar = ({ value, minValue, maxValue, downColor, upColor, bgCo
     </div>
   );
 };
-
 UpDownHBar.propTypes = {
   value: PropTypes.number.isRequired,
   minValue: PropTypes.number.isRequired,
@@ -90,4 +93,50 @@ UpDownHBar.propTypes = {
   bgColor: PropTypes.string.isRequired,
   height: PropTypes.number.isRequired,
   text: PropTypes.string,
-};
+};
+
+// ==[ P-Value Star Rating ]=================================================================================================================
+
+const usePValueStarRatingStyles = makeStyles(() => ({
+  parent: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+}));
+
+export const PValueStarRating = ({ value }) => {
+  const classes = usePValueStarRatingStyles();
+
+  // Many people add asterisks to tables and graphs to show how low the P value is.
+  // The standards for one to three asterisks are quite standard (<0.05, <0.01, <0.001), and both the NEJM and APA agree.
+  // Prism (since 5.04/d) will also show four asterisks when the P value is less than 0.0001, which is what we use here.
+  // (https://www.graphpad.com/support/faq/how-to-report-p-values-in-journals/)
+  const standards = [ 0.05, 0.01, 0.001, 0.0001 ];
+  const max = standards.length;
+  let rating = 0;
+
+  for (let i = max; i > 0; i--) {
+    const limit = standards[i - 1];
+    if (value < limit) {
+      rating = i;
+      break;
+    }
+  }
+
+  return (
+    <div className={classes.parent}>
+    {[...Array(rating)].map((v, i) => (
+      <StarIcon key={i} fontSize="small" />
+    ))}
+    {[...Array(max - rating)].map((v, i) => (
+      <StarOutlineIcon key={i + rating} fontSize="small" />
+    ))}
+    </div>
+  );
+};
+PValueStarRating.propTypes = {
+  value: PropTypes.number.isRequired,
+};

src/client/components/network-editor/pathway-table.js

@@ -7,7 +7,7 @@ import { DEFAULT_PADDING, PATHWAY_TABLE_HEIGHT } from '../defaults';
 import { EventEmitterProxy } from '../../../model/event-emitter-proxy';
 import { NetworkEditorController } from './controller';
 import { NES_COLOR_RANGE } from './network-style';
-import { UpDownHBar } from './charts';
+import { UpDownHBar, PValueStarRating } from './charts';
 
 import { makeStyles } from '@material-ui/core/styles';
 
@@ -183,7 +183,11 @@ const ContentRow = ({ row, index, selected, handleClick, handleRemove, controlle
               />
             )}
             {cell.id === 'pvalue' && (
-              row[cell.id]
+              <Tooltip title={row[cell.id]}>
+                <span>
+                  <PValueStarRating value={row[cell.id]} />
+                </span>
+              </Tooltip>
             )}
             </TableCell>
           ))}

src/client/components/network-editor/search-dialog.js

@@ -5,7 +5,7 @@ import theme from '../../theme';
 import { DEFAULT_PADDING } from '../defaults';
 import { NetworkEditorController } from './controller';
 import { NODE_OPACITY, TEXT_OPACITY, NES_COLOR_RANGE, nodeLabel } from './network-style';
-import { UpDownHBar } from './charts';
+import { UpDownHBar, PValueStarRating } from './charts';
 
 import { makeStyles, } from '@material-ui/core/styles';
 
@@ -14,7 +14,7 @@ import { Virtuoso } from 'react-virtuoso';
 import Slide from '@material-ui/core/Slide';
 import { Box, Dialog, DialogContent, DialogTitle, Grid, Paper } from "@material-ui/core";
 import { ListItem, ListItemText } from '@material-ui/core';
-import { Button, IconButton, Typography, Link } from "@material-ui/core";
+import { Button, IconButton, Typography, Tooltip } from "@material-ui/core";
 import CircularProgress from '@material-ui/core/CircularProgress';
 import SearchBar from "material-ui-search-bar";
 
@@ -78,39 +78,12 @@ const useStyles = makeStyles((theme) => ({
     // overflow:'hidden', 
     // textOverflow:'ellipsis'
   },
-  rankChartContainer: {
-    width: CHART_WIDTH,
-    padding: 0,
+  subtitleContainer: {
+    width: 100,
   },
   nesChartContainer: {
     width: CHART_WIDTH,
     padding: 0,
-    marginTop: theme.spacing(0.75),
-  },
-  geneMetadata: {
-    fontSize: '1.0em',
-    marginLeft: '0.6em',
-    marginBottom: '0.25em',
-    padding: '0.25em 1.2em 0 1.05em',
-    borderWidth: 1,
-    borderColor: theme.palette.divider,
-    borderStyle: 'hidden hidden hidden solid',
-  },
-  geneRankCollapsed: {
-    fontSize: '0.75rem',
-    fontFamily: 'monospace',
-    color: theme.palette.text.disabled,
-    marginTop: '-0.25em',
-    paddingRight: '0.75em',
-  },
-  geneRankExpanded: {
-    fontSize: '0.75rem',
-    fontFamily: 'monospace',
-    textAlign: 'right',
-    color: theme.palette.text.disabled,
-    marginTop: '-0.25em',
-    marginBottom: '0.75em',
-    paddingRight: '0.05em',
   },
   linkout: {
     fontSize: '0.75rem',
@@ -352,8 +325,24 @@ const PathwayListPanel = ({ searchTerms, items, controller, onNetworkWillChange,
               )}
                 <Grid item>
                   <Grid container direction="row" alignItems='center' spacing={2}>
-                    <Grid item>
-                      <Typography component="span" variant="body2" color="textPrimary">
+                    <Grid item className={classes.subtitleContainer}>
+                      <Typography variant="body2" color="textPrimary">
+                        P value:
+                      </Typography>
+                    </Grid>
+                    <Grid>
+                      <Tooltip title={p.pval}>
+                        <span>
+                          <PValueStarRating value={p.pval} />
+                        </span>
+                      </Tooltip>
+                    </Grid>
+                  </Grid>
+                </Grid>
+                <Grid item>
+                  <Grid container direction="row" alignItems='center' spacing={2}>
+                    <Grid item className={classes.subtitleContainer}>
+                      <Typography variant="body2" color="textPrimary">
                         NES:
                       </Typography>
                     </Grid>
@@ -373,16 +362,7 @@ const PathwayListPanel = ({ searchTerms, items, controller, onNetworkWillChange,
                     </Grid>
                   </Grid>
                 </Grid>
-                <Grid item>
-                  <Typography component="span" variant="body2" color="textPrimary">
-                    P value:
-                  </Typography>
-                  &nbsp;
-                  <Typography component="span" variant="body2" color="textSecondary" style={{marginLeft: theme.spacing(1)}}>
-                    { p.pval }
-                  </Typography>
-                </Grid>
-                <Grid item>
+                <Grid item className={classes.listItemFooter}>
                   <Typography component="span" variant="body2" color="textPrimary">
                     Genes ({ genes.length }):
                   </Typography>
@@ -417,7 +397,7 @@ const PathwayListPanel = ({ searchTerms, items, controller, onNetworkWillChange,
                     </Grid>
                   </Grid>
                 </Grid>
-              </Grid>
+              </Grid> 
             </Paper>
           }
         />