Add a color picker

GMOD · Feb 25, 2021 · 3b3847d · 3b3847d
1 parent 8f8dc8e
commit 3b3847d
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 2 deletions.
diff --git a/plugins/wiggle/package.json b/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": {

diff --git a/plugins/wiggle/src/LinearWiggleDisplay/components/SetColorDialog.tsx b/plugins/wiggle/src/LinearWiggleDisplay/components/SetColorDialog.tsx
@@ -0,0 +1,95 @@
+import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Typography,
+  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">
+        Set min/max score for track
+        <IconButton
+          aria-label="close"
+          className={classes.closeButton}
+          onClick={handleClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent style={{ overflowX: 'hidden' }}>
+        <div className={classes.root}>
+          <Typography>Select a color </Typography>
+          <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>
+  )
+}
diff --git a/plugins/wiggle/src/LinearWiggleDisplay/models/model.ts b/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
 
@@ -366,6 +384,15 @@ const stateModelFactory = (
                 self.toggleCrossHatches()
               },
             },
+            {
+              label: 'Summary score mode',
+              subMenu: ['min', 'max', 'mean', 'whiskers'].map(elt => {
+                return {
+                  label: elt,
+                  onClick: () => self.setSummaryScoreMode(elt),
+                }
+              }),
+            },
             {
               label: 'Renderer type',
               subMenu: [...rendererTypes.keys()].map(key => ({
@@ -399,6 +426,12 @@ const stateModelFactory = (
                 getContainingTrack(self).setDialogComponent(SetMinMaxDlg, self)
               },
             },
+            {
+              label: 'Set color',
+              onClick: () => {
+                getContainingTrack(self).setDialogComponent(SetColorDlg, self)
+              },
+            },
           ]
         },
 

diff --git a/plugins/wiggle/src/XYPlotRenderer/XYPlotRenderer.ts b/plugins/wiggle/src/XYPlotRenderer/XYPlotRenderer.ts
@@ -77,7 +77,7 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
         if (summary) {
           ctx.fillStyle = crossingOrigin
             ? colorCallback(feature, maxr)
-            : Color(c).lighten(0.6).toString()
+            : Color(c).lighten(0.3).toString()
           ctx.fillRect(
             leftPx,
             toY(maxr),
@@ -104,7 +104,7 @@ export default class XYPlotRenderer extends WiggleBaseRenderer {
         if (summary) {
           ctx.fillStyle = crossingOrigin
             ? colorCallback(feature, minr)
-            : Color(c).darken(0.6).toString()
+            : Color(c).darken(0.3).toString()
           ctx.fillRect(leftPx, toY(minr), w, filled ? toHeight(minr) : 1)
         }
       } else {