incorp greenelab eslint config (#128)

- install eslint-config-greenelab and prettier-config-greenelab
- relint entire codebase

.env

@@ -1 +1,2 @@
 REACT_APP_BASENAME=
+EXTEND_ESLINT=true

.eslintrc.yaml

@@ -0,0 +1,3 @@
+extends:
+  - react-app
+  - greenelab

.github/workflows/ci.yml

@@ -28,7 +28,7 @@ jobs:
         if: github.event_name == 'pull_request'
         run: npm test
       - name: Build app
-        run: npm run build
+        run: CI=false npm run build
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v2
         if: github.event_name == 'push'

.prettierrc.yaml

@@ -0,0 +1 @@
+prettier-config-greenelab

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adage-frontend",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "dependencies": {
     "@greenelab/hclust": "^0.0.0",
     "@stdlib/stdlib": "^0.0.91",
@@ -40,11 +40,10 @@
     "not dead"
   ],
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.1.1",
-    "@testing-library/react": "^10.0.1",
-    "eslint-config-google": "^0.14.0",
-    "eslint-plugin-html": "^6.0.0",
-    "eslint-plugin-react": "^7.19.0",
+    "@testing-library/jest-dom": "^5.3.0",
+    "@testing-library/react": "^10.0.2",
+    "eslint-config-greenelab": "git+https://[email protected]/greenelab/eslint-config-greenelab.git",
+    "prettier-config-greenelab": "git+https://[email protected]/greenelab/prettier-config-greenelab.git",
     "node-fetch": "^2.6.0",
     "rewire": "^5.0.0"
   }

src/app.js

@@ -69,7 +69,7 @@ const App = () => (
         <Route path='/' component={Home} />
       </Switch>
     </Router>
-    <Tooltip/>
+    <Tooltip />
   </Provider>
 );
 

src/components/popup/index.js

@@ -40,8 +40,8 @@ const Portal = ({
       className={'popup_content ' + className}
       onClick={(event) => event.stopPropagation()}
       style={{
-        right: (window.innerWidth - anchorBbox.rightAbsolute) || 0,
-        top: (anchorBbox.bottomAbsolute + distance) || 0
+        right: window.innerWidth - anchorBbox.rightAbsolute || 0,
+        top: anchorBbox.bottomAbsolute + distance || 0
       }}
     >
       {children}

src/components/table/index.js

@@ -79,7 +79,8 @@ const Table = ({
     if (sortKey === null || sortUp === null)
       return [...data];
 
-    const value = (columns.find((column) => column.key === sortKey) || {}).value;
+    const value = (columns.find((column) => column.key === sortKey) || {})
+      .value;
 
     let sortFunc;
     if (isFunction(value)) {
@@ -103,34 +104,34 @@ const Table = ({
 
   return (
     <div
-      className="table"
+      className='table'
       data-sortable={sortable}
       data-freeze-row={freezeRow}
       data-freeze-col={freezeCol}
     >
-      <div className="thead medium">
-        <div className="tr">
+      <div className='thead medium'>
+        <div className='tr'>
           {columns.map((column, index) => (
             <button
               key={index}
-              className="th"
+              className='th'
               style={{
                 width: column.width,
                 justifyContent: column.align
               }}
               data-padded={column.padded === false ? false : true}
-              title=""
+              title=''
               onClick={() => onClick(column.key)}
               disabled={!sortable}
             >
-              <span className="nowrap" aria-label="">
+              <span className='nowrap' aria-label=''>
                 {column.name}
               </span>
               {sortKey !== null && column.key && sortKey === column.key ? (
                 sortUp ? (
-                  <ArrowIcon className="rotate_ccw" />
+                  <ArrowIcon className='rotate_ccw' />
                 ) : (
-                  <ArrowIcon className="rotate_cw" />
+                  <ArrowIcon className='rotate_cw' />
                 )
               ) : (
                 ''
@@ -140,10 +141,10 @@ const Table = ({
         </div>
         <HorizontalLine />
       </div>
-      <div className="tbody">
+      <div className='tbody'>
         {table.map((row, index, array) => (
           <Fragment key={index}>
-            <div className="tr" data-shade={index === highlightedIndex}>
+            <div className='tr' data-shade={index === highlightedIndex}>
               {columns.map((column, index) => {
                 const cell = row[column.key];
                 // render cell contents
@@ -152,7 +153,7 @@ const Table = ({
                   contents = column.render({ row, column, cell });
                 else {
                   contents = (
-                    <span className="nowrap" aria-label="">
+                    <span className='nowrap' aria-label=''>
                       {cell}
                     </span>
                   );
@@ -161,7 +162,7 @@ const Table = ({
                 return (
                   <span
                     key={index}
-                    className="td"
+                    className='td'
                     data-highlight={column.key === row.highlightedField}
                     data-padded={column.padded === false ? false : true}
                     style={{

src/components/tooltip/index.js

@@ -77,7 +77,7 @@ const Tooltip = () => {
       <CSSTransition
         in={open ? true : false}
         timeout={speed}
-        classNames="tooltip"
+        classNames='tooltip'
         unmountOnExit
       >
         <Portal anchor={anchor} speed={speed} center={center} />
@@ -98,7 +98,7 @@ const Portal = ({ anchor, speed, center }) => {
   if (objectLabel) {
     const fields = humanizeKeys(objectLabel);
     content = (
-      <table className="tooltip_table text_small">
+      <table className='tooltip_table text_small'>
         <tbody>
           {Object.entries(fields).map(([key, value], index) => (
             <tr key={index}>
@@ -114,7 +114,7 @@ const Portal = ({ anchor, speed, center }) => {
 
   return createPortal(
     <div
-      className="tooltip text_small"
+      className='tooltip text_small'
       style={{
         ...computeStyle({ anchor, center }),
         transition: 'opacity ease ' + speed + 'ms'
@@ -171,40 +171,48 @@ const computeStyle = ({ anchor, center }) => {
 
   // calculate horizontal position
   switch (horizontalAlign) {
-    case 'center':
+    case 'center': {
       style.left = bbox.left + bbox.width / 2 + 'px';
       style.transform += 'translateX(-50%) ';
       break;
+    }
 
-    case 'left':
+    case 'left': {
       style.left = bbox.left + 'px';
       break;
+    }
 
-    case 'right':
+    case 'right': {
       style.right = bbox.right + 'px';
       break;
+    }
 
-    default:
+    default: {
       break;
+    }
   }
 
   // calculate vertical position
   switch (verticalAlign) {
-    case 'center':
+    case 'center': {
       style.top = bbox.top + bbox.height / 2 + 'px';
       style.transform += 'translateY(-50%) ';
       break;
+    }
 
-    case 'top':
+    case 'top': {
       style.bottom = bbox.bottom + bbox.height + padding + 'px';
       break;
+    }
 
-    case 'bottom':
+    case 'bottom': {
       style.top = bbox.top + bbox.height + padding + 'px';
       break;
+    }
 
-    default:
+    default: {
       break;
+    }
   }
 
   return style;

src/controllers/genes.js

@@ -11,7 +11,6 @@ import { isArray } from '../util/types';
 import { MAX_INT } from './';
 import { makeMapDispatchToProps } from './util';
 
-/* eslint import/no-webpack-loader-syntax: off */
 import worker from 'workerize-loader!../util/math';
 
 let GeneController = ({

src/controllers/samples.js

@@ -12,7 +12,6 @@ import { actionStatuses } from '../actions/fetch';
 import { MAX_INT } from './';
 import { makeMapDispatchToProps } from './util';
 
-/* eslint import/no-webpack-loader-syntax: off */
 import worker from 'workerize-loader!../util/math';
 
 // dispatch new actions in response to redux state changes

src/pages/experiments/activities/heatmap/index.js

@@ -75,8 +75,7 @@ const Heatmap = ({ activities, samples, signatures }) => {
           sample: d.sampleName,
           signature: d.signatureName,
           activity: d.value.toFixed(5)
-        })
-      )
+        }))
       .attr('data-tooltip-speed', 10);
     cells.exit().remove();
   }, [mounted, activities, samples, signatures, width, height]);

src/pages/experiments/activities/index.js

@@ -12,7 +12,6 @@ import { isString } from '../../../util/types';
 import { isArray } from '../../../util/types';
 import { uniqueMap } from '../../../util/object';
 
-/* eslint import/no-webpack-loader-syntax: off */
 import worker from 'workerize-loader!../../../util/math';
 
 import './index.css';
@@ -27,7 +26,10 @@ let Activities = ({ selectedExperiment, activities }) => {
   let unsortedSignatures;
   if (isArray(activities)) {
     unsortedSamples = uniqueMap(activities, (activity) => activity.sample);
-    unsortedSignatures = uniqueMap(activities, (activity) => activity.signature);
+    unsortedSignatures = uniqueMap(
+      activities,
+      (activity) => activity.signature
+    );
   }
 
   // when selected experiment changes
@@ -64,7 +66,7 @@ let Activities = ({ selectedExperiment, activities }) => {
   return (
     <>
       {isString(activities) && (
-        <FetchAlert status={activities} subject="activities" />
+        <FetchAlert status={activities} subject='activities' />
       )}
       {isArray(activities) && (
         <>

src/pages/experiments/group/index.js

@@ -11,7 +11,7 @@ import './index.css';
 
 let Selected = ({ anySelected }) => (
   <>
-    {anySelected === false && <Alert text="No experiment selected" />}
+    {anySelected === false && <Alert text='No experiment selected' />}
     {anySelected === true && (
       <>
         <Table />

src/pages/experiments/group/table/index.js

@@ -26,14 +26,14 @@ let Table = ({ samples }) => (
           <>
             <GroupButton
               sample={row}
-              index="diamond"
-              color="var(--blue)"
+              index='diamond'
+              color='var(--blue)'
               Icon={DiamondIcon}
             />
             <GroupButton
               sample={row}
-              index="spade"
-              color="var(--red)"
+              index='spade'
+              color='var(--red)'
               Icon={SpadeIcon}
             />
           </>

src/pages/experiments/index.js

@@ -18,19 +18,19 @@ const Experiments = () => (
   <>
     <Header />
     <Main>
-      <Section header="Experiment Search">
+      <Section header='Experiment Search'>
         <Search />
       </Section>
-      <Section header="Selected Experiment">
+      <Section header='Selected Experiment'>
         <Selected />
       </Section>
-      <Section header="Activity Heatmap">
+      <Section header='Activity Heatmap'>
         <Activities />
       </Section>
-      <Section header="Sample Groups">
+      <Section header='Sample Groups'>
         <Group />
       </Section>
-      <Section header="Volcano Plot">
+      <Section header='Volcano Plot'>
         <Volcano />
       </Section>
     </Main>

src/pages/experiments/search/single-table/index.js

@@ -23,7 +23,7 @@ let Table = ({ results, highlightedIndex, select }) => (
             icon={row.selected ? <RadioedIcon /> : <UnradioedIcon />}
             button
             onClick={() => select({ accession: row.accession })}
-            aria-label="Select this experiment"
+            aria-label='Select this experiment'
           />
         ),
         width: '30px',

src/pages/experiments/search/single/index.js

@@ -30,8 +30,7 @@ const mapStateToProps = (state) => ({
   results: state.experiments.searches[0] ?
     isArray(state.experiments.searches[0].results) ?
       state.experiments.searches[0].results.map((result) =>
-        mapExperimentResult(result, state)
-      ) :
+        mapExperimentResult(result, state)) :
       state.experiments.searches[0].results :
     ''
 });

src/pages/experiments/selected/index.js

@@ -10,7 +10,7 @@ import './index.css';
 
 let Selected = ({ anySelected }) => (
   <>
-    {anySelected === false && <Alert text="No experiment selected" />}
+    {anySelected === false && <Alert text='No experiment selected' />}
     {anySelected === true && <Details />}
   </>
 );