Transcript glyphs

package.json

@@ -6,7 +6,7 @@
     ],
     "scripts": {
         "build": "NODE_ENV=production lerna run build",
-        "lint": "eslint --ext .js,.ts,.jsx,.tsx .",
+        "lint": "eslint --max-warnings 0 --ext .js,.ts,.jsx,.tsx .",
         "test-ci": "jest --ci --coverage",
         "built-test-ci": "jest --ci packages/integration-tests",
         "test": "jest"
@@ -25,6 +25,7 @@
         "@material-ui/core": "^4.0.0",
         "@material-ui/styles": "^4.0.0",
         "@svgr/webpack": "^4.1.0",
+        "@testing-library/jest-dom": "^4.0.0",
         "@types/base64-js": "^1.2.5",
         "@testing-library/react": "^8.0.8",
         "@types/get-value": "^3.0.1",

packages/alignments/src/PileupRenderer/configSchema.js

@@ -8,7 +8,7 @@ export default ConfigurationSchema(
       description: 'the color of each feature in a pileup alignment',
       defaultValue: `function(feature) {
   var s = feature.get('strand');
-  return s === '-' || s === -1 ? '#8F8FD8': '#EC8B8B'
+  return s === -1 ? '#8F8FD8': '#EC8B8B'
 }`,
       functionSignature: ['feature'],
     },

packages/circular-view/src/CircularView/models/viewportVisibleRegion.js

@@ -177,7 +177,7 @@ export function viewportVisibleSection(viewSides, circleCenter, circleRadius) {
     vertices.push([0, viewB])
   }
 
-  const verticesOriginal = vertices.map(([x, y]) => [x + cx, y + cy])
+  // const verticesOriginal = vertices.map(([x, y]) => [x + cx, y + cy])
 
   // now convert them all to polar and take the max and min of rho and theta
 

packages/circular-view/src/CircularView/models/viewportVisibleRegion.test.js

@@ -94,7 +94,7 @@ describe('viewportVisibleSection', () => {
   test('viewport on upper center 2', () => {
     // [180.48708681644143, 359.3411680673888] [4.6042679453532855, 541.6042679453533]
     // see '~/Desktop/Screen Shot 2019-06-28 at 3.01.22 PM.png'
-    const { theta, rho } = viewportVisibleSection(
+    const { theta } = viewportVisibleSection(
       [0, 962, 157, 557],
       [561.6042679453533, 561.6042679453533],
       541.6042679453533,

packages/circular-view/src/StructuralVariantChordRenderer/reactComponent.js

@@ -1,8 +1,12 @@
 export default ({ jbrequire }) => {
   const React = jbrequire('react')
-  const { observer } = jbrequire('mobx-react')
+  const { observer, PropTypes: MobxPropTypes } = jbrequire('mobx-react')
   const { polarToCartesian } = jbrequire('@gmod/jbrowse-core/util')
   const { readConfObject } = jbrequire('@gmod/jbrowse-core/configuration')
+  const { PropTypes: CommonPropTypes } = jbrequire(
+    '@gmod/jbrowse-core/mst-types',
+  )
+  const PropTypes = jbrequire('prop-types')
 
   function bpToRadians(block, pos) {
     const blockStart = block.region.elided ? 0 : block.region.start
@@ -94,5 +98,19 @@ export default ({ jbrequire }) => {
     return <>{chords}</>
   }
 
+  StructuralVariantChords.propTypes = {
+    features: PropTypes.instanceOf(Map).isRequired,
+    config: CommonPropTypes.ConfigSchema.isRequired,
+    trackModel: MobxPropTypes.objectOrObservableObject,
+    blockDefinitions: PropTypes.arrayOf(MobxPropTypes.objectOrObservableObject)
+      .isRequired,
+    radius: PropTypes.number.isRequired,
+    bezierRadius: PropTypes.number.isRequired,
+  }
+
+  StructuralVariantChords.defaultProps = {
+    trackModel: undefined,
+  }
+
   return observer(StructuralVariantChords)
 }

packages/circular-view/src/StructuralVariantChordTrack/components/RpcRenderedSvgGroup.js

@@ -3,10 +3,11 @@ export default ({ jbrequire }) => {
   const { isAlive } = jbrequire('mobx-state-tree')
   const { useEffect, useRef } = React
   const { observer } = jbrequire('mobx-react-lite')
+  const { PropTypes: MobxPropTypes } = jbrequire('mobx-react')
   const { unmountComponentAtNode, hydrate } = jbrequire('react-dom')
 
   function RpcRenderedSvgGroup({ model }) {
-    const { id, data, html, filled, renderProps, renderingComponent } = model
+    const { data, html, filled, renderProps, renderingComponent } = model
 
     const ssrContainerNode = useRef(null)
 
@@ -46,5 +47,9 @@ export default ({ jbrequire }) => {
     return <g ref={ssrContainerNode} />
   }
 
+  RpcRenderedSvgGroup.propTypes = {
+    model: MobxPropTypes.observableObject.isRequired,
+  }
+
   return observer(RpcRenderedSvgGroup)
 }

packages/circular-view/src/StructuralVariantChordTrack/components/index.js

@@ -1,17 +1,20 @@
 export default ({ jbrequire }) => {
   const React = jbrequire('react')
-  const { observer } = jbrequire('mobx-react')
+  const { observer, PropTypes: MobxPropTypes } = jbrequire('mobx-react')
 
   const Loading = jbrequire(require('../../ChordTrack/components/Loading'))
   const TrackError = jbrequire(
     require('../../ChordTrack/components/TrackError'),
   )
   const RpcRenderedSvgGroup = jbrequire(require('./RpcRenderedSvgGroup'))
 
-  function StructuralVariantChordTrack({ track, view }) {
+  function StructuralVariantChordTrack({ track }) {
     if (track.error) return <TrackError model={track} />
     if (!track.filled) return <Loading model={track} />
     return <RpcRenderedSvgGroup model={track} />
   }
+  StructuralVariantChordTrack.propTypes = {
+    track: MobxPropTypes.observableObject.isRequired,
+  }
   return observer(StructuralVariantChordTrack)
 }

packages/circular-view/src/StructuralVariantChordTrack/models/index.js

@@ -1,8 +1,7 @@
 export default pluginManager => {
   const { jbrequire } = pluginManager
-  const { reaction } = jbrequire('mobx')
 
-  const { types, addDisposer } = jbrequire('mobx-state-tree')
+  const { types } = jbrequire('mobx-state-tree')
   const { ConfigurationSchema, ConfigurationReference } = jbrequire(
     '@gmod/jbrowse-core/configuration',
   )

packages/config/src/ConfigurationEditorDrawerWidget/components/ColorEditor.js

@@ -15,7 +15,7 @@ function serializeColor(color) {
 }
 
 export const ColorPicker = props => {
-  const { value, TextFieldProps, onChange } = props
+  const { value, label, TextFieldProps, onChange } = props
   const [color, setColor] = useState(value)
   const [displayed, setDisplayed] = useState(false)
 
@@ -27,6 +27,7 @@ export const ColorPicker = props => {
     <>
       <TextField
         value={c}
+        label={label}
         InputProps={{
           style: {
             color: c,
@@ -54,10 +55,12 @@ export const ColorPicker = props => {
 }
 ColorPicker.propTypes = {
   onChange: ReactPropTypes.func.isRequired,
+  label: ReactPropTypes.string,
   TextFieldProps: ReactPropTypes.shape({}),
   value: ReactPropTypes.string,
 }
 ColorPicker.defaultProps = {
+  label: '',
   value: '#000',
   TextFieldProps: {},
 }

packages/config/src/ConfigurationEditorDrawerWidget/components/__snapshots__/ConfigurationEditor.test.js.snap

@@ -788,6 +788,12 @@ exports[`ConfigurationEditor drawer widget renders all the different types of bu
       <div
         class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
       >
+        <label
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+          data-shrink="true"
+        >
+          colorTest
+        </label>
         <div
           class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
           style="color: rgb(57, 100, 148); border-right-width: 25px; border-right-style: solid; border-right-color: #396494;"
@@ -1723,7 +1729,7 @@ exports[`ConfigurationEditor drawer widget renders with defaults of the Alignmen
                   >
                     function(feature) {
   var s = feature.get('strand');
-  return s === '-' || s === -1 ? '#8F8FD8': '#EC8B8B'
+  return s === -1 ? '#8F8FD8': '#EC8B8B'
 }
                   </textarea>
                   <pre
@@ -1814,24 +1820,6 @@ exports[`ConfigurationEditor drawer widget renders with defaults of the Alignmen
                       ===
                     </span>
 
-                    <span
-                      class="token string"
-                    >
-                      '-'
-                    </span>
-
-                    <span
-                      class="token operator"
-                    >
-                      ||
-                    </span>
-                     s 
-                    <span
-                      class="token operator"
-                    >
-                      ===
-                    </span>
-
                     <span
                       class="token operator"
                     >
@@ -2079,6 +2067,12 @@ exports[`ConfigurationEditor drawer widget renders with defaults of the Alignmen
               <div
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
               >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+                  data-shrink="true"
+                >
+                  color1
+                </label>
                 <div
                   class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                   style="color: goldenrod; border-right-width: 25px; border-right-style: solid; border-right-color: goldenrod;"
@@ -2131,6 +2125,12 @@ exports[`ConfigurationEditor drawer widget renders with defaults of the Alignmen
               <div
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
               >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+                  data-shrink="true"
+                >
+                  color2
+                </label>
                 <div
                   class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                   style="color: black; border-right-width: 25px; border-right-style: solid; border-right-color: black;"
@@ -2183,6 +2183,12 @@ exports[`ConfigurationEditor drawer widget renders with defaults of the Alignmen
               <div
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
               >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+                  data-shrink="true"
+                >
+                  color3
+                </label>
                 <div
                   class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                   style="color: rgb(53, 112, 137); border-right-width: 25px; border-right-style: solid; border-right-color: #357089;"
@@ -2505,6 +2511,12 @@ exports[`ConfigurationEditor drawer widget renders with defaults of the Alignmen
                   <div
                     class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
                   >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+                      data-shrink="true"
+                    >
+                      nameColor
+                    </label>
                     <div
                       class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                       style="color: black; border-right-width: 25px; border-right-style: solid; border-right-color: black;"
@@ -2727,6 +2739,12 @@ exports[`ConfigurationEditor drawer widget renders with defaults of the Alignmen
                   <div
                     class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
                   >
+                    <label
+                      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+                      data-shrink="true"
+                    >
+                      descriptionColor
+                    </label>
                     <div
                       class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
                       style="color: blue; border-right-width: 25px; border-right-style: solid; border-right-color: blue;"

packages/core/BaseAdapter.ts

@@ -1,5 +1,5 @@
 import { Observer, Observable, merge } from 'rxjs'
-import { tap, takeUntil } from 'rxjs/operators'
+import { takeUntil } from 'rxjs/operators'
 import { IRegion as Region } from './mst-types'
 import { ObservableCreate } from './util/rxjs'
 import { checkAbortSignal, observeAbortSignal } from './util'

packages/core/components/ResizeHandleHorizontal.js

@@ -15,6 +15,7 @@ const styles = {
 class ResizeHandleHorizontal extends Component {
   static propTypes = {
     classes: ReactPropTypes.objectOf(ReactPropTypes.string).isRequired,
+    style: ReactPropTypes.shape().isRequired,
     objectId: ReactPropTypes.string.isRequired,
     onVerticalDrag: ReactPropTypes.func.isRequired,
   }

packages/core/package.json

@@ -55,6 +55,10 @@
     "whatwg-fetch": "^3.0.0"
   },
   "peerDependencies": {
+    "@material-ui/core": "^4.0.0",
+    "mobx": "^5.0.0",
+    "mobx-react": "^6.0.0",
+    "mobx-state-tree": "3.10.2",
     "prop-types": "^15.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",

packages/core/pluggableElementTypes/renderers/ServerSideRendererType.js

@@ -1,6 +1,5 @@
 import { renderToString } from 'react-dom/server'
 import { filter, ignoreElements, tap } from 'rxjs/operators'
-import { getSnapshot } from 'mobx-state-tree'
 import { readConfObject } from '../../configuration'
 import { checkAbortSignal, iterMap } from '../../util'
 import SimpleFeature from '../../util/simpleFeature'

packages/core/rpc/RpcManager.js

@@ -1,4 +1,3 @@
-import { decorate, observable } from 'mobx'
 import { getSnapshot, isStateTreeNode, isAlive } from 'mobx-state-tree'
 import { readConfObject } from '../configuration'