Merge pull request #1743 from GMOD/add_color_picker

Add color picker and choice of summary score style for wiggle track

plugins/wiggle/package.json

@@ -41,6 +41,7 @@
     "color": "^3.1.1",
     "d3-scale": "^3.2.3",
     "json-stable-stringify": "^1.0.1",
+    "react-color": "^2.19.3",
     "react-d3-axis": "^0.1.2"
   },
   "peerDependencies": {

plugins/wiggle/src/LinearWiggleDisplay/components/SetColorDialog.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Button,
+} from '@material-ui/core'
+import CloseIcon from '@material-ui/icons/Close'
+import { CompactPicker, Color, RGBColor } from 'react-color'
+
+const useStyles = makeStyles(theme => ({
+  root: {},
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+}))
+
+// this is needed because passing a entire color object into the react-color
+// for alpha, can't pass in an rgba string for example
+function serializeColor(color: Color) {
+  if (color instanceof Object) {
+    const { r, g, b, a } = color as RGBColor
+    return `rgb(${r},${g},${b},${a})`
+  }
+  return color
+}
+
+export default function SetColorDialog(props: {
+  display: {
+    color: number
+    setColor: Function
+  }
+  handleClose: () => void
+}) {
+  const classes = useStyles()
+  const { display, handleClose } = props
+
+  return (
+    <Dialog
+      open
+      onClose={handleClose}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">
+        Select a color
+        <IconButton
+          aria-label="close"
+          className={classes.closeButton}
+          onClick={handleClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent style={{ overflowX: 'hidden' }}>
+        <div className={classes.root}>
+          <CompactPicker
+            onChange={event => {
+              display.setColor(serializeColor(event.rgb))
+            }}
+          />
+          <br />
+          <div style={{ margin: 20 }}>
+            <Button
+              onClick={() => {
+                display.setColor(undefined)
+              }}
+              color="secondary"
+              variant="contained"
+            >
+              Restore default from config
+            </Button>
+            <Button
+              variant="contained"
+              color="primary"
+              type="submit"
+              onClick={() => {
+                handleClose()
+              }}
+            >
+              Submit
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

plugins/wiggle/src/LinearWiggleDisplay/models/model.ts

@@ -32,6 +32,7 @@ import { getNiceDomain, getScale } from '../../util'
 
 import Tooltip from '../components/Tooltip'
 import SetMinMaxDlg from '../components/SetMinMaxDialog'
+import SetColorDlg from '../components/SetColorDialog'
 
 // fudge factor for making all labels on the YScalebar visible
 export const YSCALEBAR_LABEL_OFFSET = 5
@@ -66,6 +67,8 @@ const stateModelFactory = (
         selectedRendering: types.optional(types.string, ''),
         resolution: types.optional(types.number, 1),
         fill: types.maybe(types.boolean),
+        color: types.maybe(types.string),
+        summaryScoreMode: types.maybe(types.string),
         rendererTypeNameState: types.maybe(types.string),
         scale: types.maybe(types.string),
         autoscale: types.maybe(types.string),
@@ -91,6 +94,9 @@ const stateModelFactory = (
         self.stats.scoreMax = stats.scoreMax
         self.ready = true
       },
+      setColor(color: string) {
+        self.color = color
+      },
 
       setLoading(aborter: AbortController) {
         const { statsFetchInProgress: statsFetch } = self
@@ -125,6 +131,10 @@ const stateModelFactory = (
         }
       },
 
+      setSummaryScoreMode(val: string) {
+        self.summaryScoreMode = val
+      },
+
       setAutoscale(val: string) {
         self.autoscale = val
       },
@@ -197,12 +207,20 @@ const stateModelFactory = (
           filled: self.fill,
           scaleType: this.scaleType,
           displayCrossHatches: self.displayCrossHatches,
+          summaryScoreMode: self.summaryScoreMode,
+          color: self.color,
         })
       },
     }))
     .views(self => {
       let oldDomain: [number, number] = [0, 0]
       return {
+        get summaryScoreModeSetting() {
+          return (
+            self.summaryScoreMode ||
+            readConfObject(self.rendererConfig, 'summaryScoreMode')
+          )
+        },
         get domain() {
           const { stats, scaleType, minScore, maxScore } = self
 
@@ -338,6 +356,15 @@ const stateModelFactory = (
                       },
                     ],
                   },
+                  {
+                    label: 'Summary score mode',
+                    subMenu: ['min', 'max', 'avg', 'whiskers'].map(elt => {
+                      return {
+                        label: elt,
+                        onClick: () => self.setSummaryScoreMode(elt),
+                      }
+                    }),
+                  },
                 ]
               : []),
             ...(self.canHaveFill
@@ -367,6 +394,7 @@ const stateModelFactory = (
                 self.toggleCrossHatches()
               },
             },
+
             ...(getConf(self, 'renderers').length > 1
               ? [
                   {
@@ -404,6 +432,12 @@ const stateModelFactory = (
                 getContainingTrack(self).setDialogComponent(SetMinMaxDlg, self)
               },
             },
+            {
+              label: 'Set color',
+              onClick: () => {
+                getContainingTrack(self).setDialogComponent(SetColorDlg, self)
+              },
+            },
           ]
         },