Chore #159855401 - Add Javascript linter (#12)

* Added JSLint config files. * Linting files. Replaced single and double quotes with backticks, removed unused imports, added missing prop types. * Added gene expression ESLint config as npm dependency. * Removed unnecessary dependency. * Updated ESLint config to v0.3. Fixed indentation.
ebi-gene-expression-group · Mar 5, 2020 · 4abb61c · 4abb61c
1 parent 232438a
commit 4abb61c
Show file tree

Hide file tree

Showing 19 changed files with 1,144 additions and 259 deletions.
diff --git a/packages/scxa-tsne-plot/.eslintignore b/packages/scxa-tsne-plot/.eslintignore
@@ -0,0 +1,5 @@
+webpack.config.js
+coverage/
+__mocks__/
+lib/
+dist/
diff --git a/packages/scxa-tsne-plot/.eslintrc.json b/packages/scxa-tsne-plot/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "eslint-config-gene-expression"
+}
diff --git a/packages/scxa-tsne-plot/__test__/ClusterTSnePlot.test.js b/packages/scxa-tsne-plot/__test__/ClusterTSnePlot.test.js
@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer'
 import Color from 'color'
 
 import Enzyme from 'enzyme'
-import {shallow, mount} from 'enzyme'
+import {mount} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import {_colourizeClusters} from '../src/ClusterTSnePlot'
@@ -34,12 +34,7 @@ describe(`ClusterTSnePlot colourize function`, () => {
 
   test(`must not dim (i.e. add a color field) any series if all are highlighted`, () => {
     const randomSeries = randomHighchartsSeriesWithNamesAndMaxPoints(seriesNames, maxPointsPerSeries)
-
-    randomSeries.forEach((series) => {
-      // console.log("series name", series.name)
-    })
     _colourizeClusters(seriesNames, `lightgrey`)(randomSeries).forEach((series) => {
-      // console.log('which series am i looking at', series.name)
       series.data.forEach((point) => {
         expect(point).not.toHaveProperty(`color`)
       })

diff --git a/packages/scxa-tsne-plot/__test__/GeneExpressionTSnePlot.test.js b/packages/scxa-tsne-plot/__test__/GeneExpressionTSnePlot.test.js
@@ -3,7 +3,7 @@ import renderer from 'react-test-renderer'
 import Color from 'color'
 
 import Enzyme from 'enzyme'
-import {shallow, mount} from 'enzyme'
+import {mount} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import {_colourizeExpressionLevel} from '../src/GeneExpressionTSnePlot'
@@ -47,17 +47,18 @@ describe(`GeneExpressionTSnePlot colourize function`, () => {
       x: 0,
       y: 0,
       expressionLevel: 10000,
-      name: "Maximum overkill"
+      name: `Maximum overkill`
     })
 
     const allPoints = randomSeries.reduce((acc, series) => acc.concat(series.data), [])
     const maxExpressionLevel = Math.round10(Math.max(...allPoints.map((point) => point.expressionLevel)), -2)
 
-    const maxExpressionLevelPoints = _colourizeExpressionLevel(gradientColourRanges(), [])(plotData(randomSeries)).reduce((acc, series) => {
-      acc.push(series.data.filter((point) => point.expressionLevel === maxExpressionLevel, -2))
-      return acc
-    }, [])
-    .reduce((acc, points) => points.length ? acc.concat(points) : acc, [])
+    const maxExpressionLevelPoints = _colourizeExpressionLevel(gradientColourRanges(), [])(plotData(randomSeries))
+      .reduce((acc, series) => {
+        acc.push(series.data.filter((point) => point.expressionLevel === maxExpressionLevel, -2))
+        return acc
+      }, [])
+      .reduce((acc, points) => points.length ? acc.concat(points) : acc, [])
 
     expect(maxExpressionLevelPoints.length).toBeGreaterThanOrEqual(1)
     maxExpressionLevelPoints.forEach((point) => {
@@ -71,21 +72,22 @@ describe(`GeneExpressionTSnePlot colourize function`, () => {
       x: 0,
       y: 0,
       expressionLevel: 0,
-      name: "Minimum underkill"
+      name: `Minimum underkill`
     })
 
     const allPoints = randomSeries.reduce((acc, series) => acc.concat(series.data), [])
     const minExpressionLevel = Math.round10(Math.min(...allPoints.map((point) => point.expressionLevel)), -2)
 
-    const minExpressionLevelPoints = _colourizeExpressionLevel(gradientColourRanges(), [])(plotData(randomSeries)).reduce((acc, series) => {
-      acc.push(series.data.filter((point) => point.expressionLevel === minExpressionLevel, -2))
-      return acc
-    }, [])
-    .reduce((acc, points) => points.length ? acc.concat(points) : acc, [])
+    const minExpressionLevelPoints = _colourizeExpressionLevel(gradientColourRanges(), [])(plotData(randomSeries))
+      .reduce((acc, series) => {
+        acc.push(series.data.filter((point) => point.expressionLevel === minExpressionLevel, -2))
+        return acc
+      }, [])
+      .reduce((acc, points) => points.length ? acc.concat(points) : acc, [])
 
     expect(minExpressionLevelPoints.length).toBeGreaterThanOrEqual(1)
     minExpressionLevelPoints.forEach((point) => {
-      expect(point).toHaveProperty(`color`, Color('lightgrey').alpha(0.65).rgb().toString())
+      expect(point).toHaveProperty(`color`, Color(`lightgrey`).alpha(0.65).rgb().toString())
     })
   })
 
@@ -94,10 +96,10 @@ describe(`GeneExpressionTSnePlot colourize function`, () => {
 
     _colourizeExpressionLevel(gradientColourRanges(), [])(plotData(randomSeries)).forEach((series) => {
       series.data.forEach((point) => {
-          if (String(point.expressionLevel).includes(`.`)) {
-            expect(String(point.expressionLevel).split(`.`)[1].length).toBeLessThanOrEqual(2)
-          }
-        })
+        if (String(point.expressionLevel).includes(`.`)) {
+          expect(String(point.expressionLevel).split(`.`)[1].length).toBeLessThanOrEqual(2)
+        }
+      })
     })
   })
 
@@ -134,8 +136,8 @@ describe(`GeneExpressionTSnePlot colourize function`, () => {
       max: 100.0
     }).forEach((series) => {
       series.data.forEach((point) => {
-          expect(point).toHaveProperty(`color`, Color(`blue`).alpha(0.65).rgb().toString())
-        })
+        expect(point).toHaveProperty(`color`, Color(`blue`).alpha(0.65).rgb().toString())
+      })
     })
   })
 })

diff --git a/packages/scxa-tsne-plot/__test__/MultiStopGradient.test.js b/packages/scxa-tsne-plot/__test__/MultiStopGradient.test.js
@@ -2,7 +2,7 @@ import React from 'react'
 import renderer from 'react-test-renderer'
 
 import Enzyme from 'enzyme'
-import {shallow, mount} from 'enzyme'
+import {mount} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import MultiStopGradient from '../src/MultiStopGradient'

diff --git a/packages/scxa-tsne-plot/__test__/PlotSettingsDropdown.test.js b/packages/scxa-tsne-plot/__test__/PlotSettingsDropdown.test.js
@@ -2,17 +2,16 @@ import React from 'react'
 import renderer from 'react-test-renderer'
 
 import Enzyme from 'enzyme'
-import {shallow, mount} from 'enzyme'
+import {mount} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 import Select from 'react-select'
 
 import PlotSettingsDropdown from '../src/PlotSettingsDropdown'
-import {_formatDropdownOption} from '../src/PlotSettingsDropdown'
 
 Enzyme.configure({ adapter: new Adapter() })
 
-describe('PlotSettingsDropdown', () => {
+describe(`PlotSettingsDropdown`, () => {
   test(`with no data matches snapshot`, () => {
     const onSelect = () => {}
 
@@ -23,23 +22,23 @@ describe('PlotSettingsDropdown', () => {
     expect(tree).toMatchSnapshot()
   })
 
-  test('contains Select component and label', () => {
+  test(`contains Select component and label`, () => {
     const onSelect = () => {}
 
     const options = [
       {
-        value: 'hello',
-        label: 'hello'
+        value: `hello`,
+        label: `hello`
       },
       {
-        value: 'world',
-        label: 'world'
+        value: `world`,
+        label: `world`
       }
     ]
 
-    const wrapper = mount(<PlotSettingsDropdown labelText={'Test dropdown'} defaultValue={'world'} options={options} onSelect={onSelect}/>)
+    const wrapper = mount(<PlotSettingsDropdown labelText={`Test dropdown`} defaultValue={`world`} options={options} onSelect={onSelect}/>)
 
-    expect(wrapper.find('label').text()).toBe('Test dropdown')
+    expect(wrapper.find(`label`).text()).toBe(`Test dropdown`)
     expect(wrapper.find(Select).length).toBe(1)
   })
 })
diff --git a/packages/scxa-tsne-plot/__test__/plotloader/LoadingOverlay.test.js b/packages/scxa-tsne-plot/__test__/plotloader/LoadingOverlay.test.js
@@ -1,7 +1,6 @@
 import React from 'react'
-import renderer from 'react-test-renderer'
 import Enzyme from 'enzyme'
-import {shallow, mount, render} from 'enzyme'
+import {shallow} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
 Enzyme.configure({ adapter: new Adapter() })

diff --git a/packages/scxa-tsne-plot/__test__/util/MathRound.test.js b/packages/scxa-tsne-plot/__test__/util/MathRound.test.js
@@ -45,7 +45,7 @@ describe(`Mozilla’s round util`, () => {
   })
 
   test(`defaults to Math’s rounding methods if exp is 0 or undefined`, () => {
-    const value = Math.random() * 100;
+    const value = Math.random() * 100
     expect(Math.round10(value, 0)).toEqual(Math.round(value))
     expect(Math.floor10(value, 0)).toEqual(Math.floor(value))
     expect(Math.ceil10(value, 0)).toEqual(Math.ceil(value))

diff --git a/packages/scxa-tsne-plot/html/Demo.js b/packages/scxa-tsne-plot/html/Demo.js
@@ -6,16 +6,16 @@ const perplexities = [1, 5, 10, 15, 20]
 const ks = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
 const metadata = [
   {
-    value: "characteristic_inferred_cell_type",
-    label: "Inferred cell type"
+    value: `characteristic_inferred_cell_type`,
+    label: `Inferred cell type`
   },
   {
-    value: "factor_sampling_site",
-    label: "Sampling site"
+    value: `factor_sampling_site`,
+    label: `Sampling site`
   },
   {
-    value: "factor_time",
-    label: "Time"
+    value: `factor_time`,
+    label: `Time`
   }]
 
 class Demo extends React.Component {
@@ -68,41 +68,42 @@ class Demo extends React.Component {
           </form>
         </div>
 
-        <TsnePlotView atlasUrl={`http://localhost:8080/gxa/sc/`}
-                      suggesterEndpoint={`json/suggestions`}
-                      experimentAccession={this.state.experimentAccession}
-                      wrapperClassName={`row expanded`}
-                      clusterPlotClassName={`small-12 large-6 columns`}
-                      expressionPlotClassName={`small-12 large-6 columns`}
-                      perplexities={perplexities}
-                      selectedPerplexity={this.state.perplexity}
-                      ks={ks}
-                      metadata={metadata}
-                      selectedColourBy={this.state.selectedColourBy}
-                      selectedColourByCategory={this.state.selectedColourByCategory} // Is the plot coloured by clusters or metadata
-                      highlightClusters={this.state.highlightClusters}
-                      geneId={this.state.geneId}
-                      speciesName={'Homo sapiens'}
-                      onChangePerplexity={
-                        (perplexity) => { this.setState({perplexity: perplexity}) }
-                      }
-                      onChangeColourBy={
-                        (colourByCategory, colourByValue) => {
-                          this.setState({
-                            selectedColourBy : colourByValue,
-                            selectedColourByCategory : colourByCategory,
-                          })
-                          this._resetHighlightClusters()
-                        }
-                      }
-                      onSelectGeneId={
-                        (geneId) => {
-                          this.setState({
-                            geneId: geneId,
-                          })
-                          this._resetHighlightClusters()
-                        }
-                      }
+        <TsnePlotView
+          atlasUrl={`http://localhost:8080/gxa/sc/`}
+          suggesterEndpoint={`json/suggestions`}
+          experimentAccession={this.state.experimentAccession}
+          wrapperClassName={`row expanded`}
+          clusterPlotClassName={`small-12 large-6 columns`}
+          expressionPlotClassName={`small-12 large-6 columns`}
+          perplexities={perplexities}
+          selectedPerplexity={this.state.perplexity}
+          ks={ks}
+          metadata={metadata}
+          selectedColourBy={this.state.selectedColourBy}
+          selectedColourByCategory={this.state.selectedColourByCategory} // Is the plot coloured by clusters or metadata
+          highlightClusters={this.state.highlightClusters}
+          geneId={this.state.geneId}
+          speciesName={`Homo sapiens`}
+          onChangePerplexity={
+            (perplexity) => { this.setState({perplexity: perplexity}) }
+          }
+          onChangeColourBy={
+            (colourByCategory, colourByValue) => {
+              this.setState({
+                selectedColourBy : colourByValue,
+                selectedColourByCategory : colourByCategory,
+              })
+              this._resetHighlightClusters()
+            }
+          }
+          onSelectGeneId={
+            (geneId) => {
+              this.setState({
+                geneId: geneId,
+              })
+              this._resetHighlightClusters()
+            }
+          }
         />
       </div>
     )