Lint and add GH Action to check linting (#58)

hms-dbmi · Dec 1, 2020 · 3e0871d · 3e0871d
1 parent bb62a49
commit 3e0871d
Show file tree

Hide file tree

Showing 12 changed files with 407 additions and 380 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,21 @@
+name: Node CI
+
+on: push
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Linting (prettier)
+        uses: actions/setup-node@v1
+        with: 
+          node-version: '15.x'
+      - run: npm install
+      - run: npm run lint
+
+      # TODO: add tests
diff --git a/src/components/LayerController/AcquisitionController.tsx b/src/components/LayerController/AcquisitionController.tsx
@@ -6,46 +6,39 @@ import type { Acquisition } from '../../state';
 
 import { sourceInfoState } from '../../state';
 
-
-function AcquisitionController({ layerId }: {layerId: string,}): JSX.Element | null {
-
-    const sourceInfo = useRecoilValue(sourceInfoState);
-    const { acquisitionId, acquisitions, source } = sourceInfo[layerId];
-
-    if (!acquisitions) {
-        return null;
-    }
-
-    const handleSelectionChange = (event: ChangeEvent<HTMLSelectElement>) => {
-        let value = event.target.value;
-        let acquisition = value === '-1' ? '' : `&acquisition=${value}`
-        window.location.href = window.location.origin + window.location.pathname + `?source=${source}${acquisition}`;
-    };
-
-    return (
-        <>
-            <Grid>
-                <NativeSelect
-                    fullWidth
-                    style={{ fontSize: '0.7em' }}
-                    onChange={handleSelectionChange}
-                    value={acquisitionId}
-                >
-                    <option value="-1" key="-1">
-                        Filter by Acquisition
-                    </option>
-                    {acquisitions.map(acq => {
-                        acq = acq as Acquisition;
-                        return(
-                            <option value={acq.id} key={acq.id}>
-                                Acquisition: {acq.name}
-                            </option>
-                        )
-                    })}
-                </NativeSelect>
-            </Grid>
-        </>
-    )
+function AcquisitionController({ layerId }: { layerId: string }): JSX.Element | null {
+  const sourceInfo = useRecoilValue(sourceInfoState);
+  const { acquisitionId, acquisitions, source } = sourceInfo[layerId];
+
+  if (!acquisitions) {
+    return null;
+  }
+
+  const handleSelectionChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    let value = event.target.value;
+    let acquisition = value === '-1' ? '' : `&acquisition=${value}`;
+    window.location.href = window.location.origin + window.location.pathname + `?source=${source}${acquisition}`;
+  };
+
+  return (
+    <>
+      <Grid>
+        <NativeSelect fullWidth style={{ fontSize: '0.7em' }} onChange={handleSelectionChange} value={acquisitionId}>
+          <option value="-1" key="-1">
+            Filter by Acquisition
+          </option>
+          {acquisitions.map((acq) => {
+            acq = acq as Acquisition;
+            return (
+              <option value={acq.id} key={acq.id}>
+                Acquisition: {acq.name}
+              </option>
+            );
+          })}
+        </NativeSelect>
+      </Grid>
+    </>
+  );
 }
 
 export default AcquisitionController;
diff --git a/src/components/LayerController/AxisOptions.tsx b/src/components/LayerController/AxisOptions.tsx
@@ -8,88 +8,84 @@ import { MoreHoriz } from '@material-ui/icons';
 import { layerStateFamily } from '../../state';
 
 const DenseInput = withStyles({
-    root: {
-        width: '5.5em',
-        fontSize: '0.7em',
-    },
+  root: {
+    width: '5.5em',
+    fontSize: '0.7em',
+  },
 })(Input);
 
-function AxisOptions({ layerId, axisIndex, max }: {
-    layerId: string,
-    axisIndex: number,
-    max: number
-}): JSX.Element {
-    const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
-    const [anchorEl, setAnchorEl] = useState<null | Element>(null);
+function AxisOptions({ layerId, axisIndex, max }: { layerId: string; axisIndex: number; max: number }): JSX.Element {
+  const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
+  const [anchorEl, setAnchorEl] = useState<null | Element>(null);
 
-    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
 
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
-    const handleIndexChange = (event: ChangeEvent<HTMLInputElement>) => {
-        let value = +event.target.value;
-        // Restrict value to valid range
-        if (value < 0) value = 0;
-        if (value > max) value = max;
+  const handleIndexChange = (event: ChangeEvent<HTMLInputElement>) => {
+    let value = +event.target.value;
+    // Restrict value to valid range
+    if (value < 0) value = 0;
+    if (value > max) value = max;
 
-        setLayer((prev) => {
-            let layerProps = { ...prev.layerProps }
-            // for each channel, update index
-            layerProps.loaderSelection = layerProps.loaderSelection.map(ch => {
-                let new_ch = [...ch]
-                new_ch[axisIndex] = value;
-                return new_ch;
-            });
+    setLayer((prev) => {
+      let layerProps = { ...prev.layerProps };
+      // for each channel, update index
+      layerProps.loaderSelection = layerProps.loaderSelection.map((ch) => {
+        let new_ch = [...ch];
+        new_ch[axisIndex] = value;
+        return new_ch;
+      });
 
-            return { ...prev, layerProps };
-        });
-    };
+      return { ...prev, layerProps };
+    });
+  };
 
-    const open = Boolean(anchorEl);
-    const id = open ? `${axisIndex}-index-${layerId}-options` : undefined;
-    const value = layer.layerProps.loaderSelection[0] ? layer.layerProps.loaderSelection[0][axisIndex] : 1;
+  const open = Boolean(anchorEl);
+  const id = open ? `${axisIndex}-index-${layerId}-options` : undefined;
+  const value = layer.layerProps.loaderSelection[0] ? layer.layerProps.loaderSelection[0][axisIndex] : 1;
 
-    return (
-        <>
-            <IconButton
-                onClick={handleClick}
-                aria-describedby={id}
-                style={{
-                    backgroundColor: 'transparent',
-                    padding: 0,
-                    zIndex: 2,
-                    cursor: 'pointer',
-                }}
-            >
-                <MoreHoriz />
-            </IconButton>
-            <Popover
-                id={id}
-                open={open}
-                anchorEl={anchorEl}
-                onClose={handleClose}
-                anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'left',
-                }}
-                transformOrigin={{
-                    vertical: 'top',
-                    horizontal: 'left',
-                }}
-            >
-                <Paper style={{ padding: '0px 4px', marginBottom: 4 }}>
-                    <Typography variant="caption">Index:</Typography>
-                    <Divider />
-                    <DenseInput value={value} onChange={handleIndexChange} type="number" id="max" fullWidth={false} />
-                    <Divider />
-                </Paper>
-            </Popover>
-        </>
-    );
+  return (
+    <>
+      <IconButton
+        onClick={handleClick}
+        aria-describedby={id}
+        style={{
+          backgroundColor: 'transparent',
+          padding: 0,
+          zIndex: 2,
+          cursor: 'pointer',
+        }}
+      >
+        <MoreHoriz />
+      </IconButton>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+      >
+        <Paper style={{ padding: '0px 4px', marginBottom: 4 }}>
+          <Typography variant="caption">Index:</Typography>
+          <Divider />
+          <DenseInput value={value} onChange={handleIndexChange} type="number" id="max" fullWidth={false} />
+          <Divider />
+        </Paper>
+      </Popover>
+    </>
+  );
 }
 
 export default AxisOptions;
diff --git a/src/components/LayerController/AxisSlider.tsx b/src/components/LayerController/AxisSlider.tsx
@@ -19,12 +19,7 @@ const DenseSlider = withStyles({
   },
 })(Slider);
 
-
-function AxisSlider({ layerId, axisIndex, max }: {
-  layerId: string,
-  axisIndex: number,
-  max: number
-}): JSX.Element {
+function AxisSlider({ layerId, axisIndex, max }: { layerId: string; axisIndex: number; max: number }): JSX.Element {
   const [layer, setLayer] = useRecoilState(layerStateFamily(layerId));
   const sourceInfo = useRecoilValue(sourceInfoState);
   const { axis_labels } = sourceInfo[layerId];
@@ -41,19 +36,18 @@ function AxisSlider({ layerId, axisIndex, max }: {
     setValue(layer.layerProps.loaderSelection[0] ? layer.layerProps.loaderSelection[0][axisIndex] : 1);
   }, [layer.layerProps.loaderSelection]);
 
-
   const handleRelease = () => {
     setLayer((prev) => {
-      let layerProps = { ...prev.layerProps }
+      let layerProps = { ...prev.layerProps };
       // for each channel, update index of this axis
-      layerProps.loaderSelection = layerProps.loaderSelection.map(ch => {
+      layerProps.loaderSelection = layerProps.loaderSelection.map((ch) => {
         let new_ch = [...ch];
         new_ch[axisIndex] = value;
         return new_ch;
       });
       return { ...prev, layerProps };
-    })
-  }
+    });
+  };
 
   const handleDrag = (_: ChangeEvent<unknown>, value: number | number[]) => {
     setValue(value as number);
@@ -82,13 +76,14 @@ function AxisSlider({ layerId, axisIndex, max }: {
               onChangeCommitted={handleRelease}
               min={0}
               max={max}
-              step={1} />
+              step={1}
+            />
           </Grid>
         </Grid>
       </Grid>
       <Divider />
     </>
-  )
+  );
 }
 
 export default AxisSlider;
diff --git a/src/components/LayerController/AxisSliders.tsx b/src/components/LayerController/AxisSliders.tsx
@@ -1,18 +1,17 @@
-import React from 'react'
+import React from 'react';
 import { Grid, Divider } from '@material-ui/core';
 import { useRecoilValue } from 'recoil';
 import AxisSlider from './AxisSlider';
 import { sourceInfoState } from '../../state';
 
-
 function AxisSliders({ layerId }: { layerId: string }): JSX.Element | null {
   const sourceInfo = useRecoilValue(sourceInfoState);
   const { axis_labels, channel_axis, loader } = sourceInfo[layerId];
 
   const sliders = axis_labels
     .slice(0, -2) // ignore last two axes, [y,x]
-    .map((name, i): [string, number, number] => ([name, i, loader.base.shape[i]])) // capture the name, index, and size of non-yx dims
-    .filter(d => {
+    .map((name, i): [string, number, number] => [name, i, loader.base.shape[i]]) // capture the name, index, and size of non-yx dims
+    .filter((d) => {
       if (d[1] === channel_axis) return false; // ignore channel_axis (for OME-Zarr channel_axis === 1)
       if (d[2] > 1) return true; // keep if size > 1
       return false; // otherwise ignore as well
@@ -22,12 +21,10 @@ function AxisSliders({ layerId }: { layerId: string }): JSX.Element | null {
   if (sliders.length === 0) return null;
   return (
     <>
-      <Grid>
-        {sliders}
-      </Grid>
+      <Grid>{sliders}</Grid>
       <Divider />
     </>
-  )
+  );
 }
 
 export default AxisSliders;
diff --git a/src/components/Viewer.tsx b/src/components/Viewer.tsx
@@ -7,7 +7,6 @@ import type { Layer } from '@deck.gl/core';
 import { viewerViewState, layersSelector } from '../state';
 import type { VivLayerProps, ZarrLoader } from '@hms-dbmi/viv';
 
-
 function WrappedViewStateDeck({ layers }: { layers: Layer<VivLayerProps>[] }): JSX.Element {
   const [viewState, setViewState] = useRecoilState(viewerViewState);
 
@@ -19,8 +18,8 @@ function WrappedViewStateDeck({ layers }: { layers: Layer<VivLayerProps>[] }): J
     const zoom = -loader.numLevels;
     const target = [width / 2, height / 2, 0];
     setViewState({ zoom, target });
-  };
-  
+  }
+
   const views = [new OrthographicView({ id: 'ortho', controller: true })];
 
   return (