fixes after linting & build

.eslintrc.cjs

@@ -12,17 +12,21 @@ module.exports = {
   rules: {
     // note we must disable the base rule as it can report incorrect errors
     "no-unused-vars": "off",
+    // TODO: remove the following in a subsequent PR
+    "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": [
       "error",
       {
-        "argsIgnorePattern": "^_",
-        "varsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_"
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_"
       }
     ],
     "react-refresh/only-export-components": [
       "warn",
-      { allowConstantExport: true },
+      {
+        allowConstantExport: true,
+      },
     ],
   },
 }

.github/workflows/ci.yaml

@@ -31,8 +31,8 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
       - run: npm ci
+      - run: npm run lint
       - run: npm run build
       - run: npm run test
-      # TODO: address following in subsequent PRs
-      #- run: npm run lint
+      # TODO: address in subsequent PR
       #- run: npm run coverage

CHANGES.md

@@ -4,21 +4,18 @@
   from [create-react-app](https://create-react-app.dev/) and `yarn`
   to [vite](https://vitejs.dev/) and `npm`. (#296)
 
+TODO:
 
-## Changes in version 1.1.1
-
-### Fixes
+* Allow running in `.github/workflows/ci.yaml`:   
+  - `run: npm run lint`
+  - `run: npm run coverage`
 
-* Fixed a crash when plotting more than 10 points on map. (#299)
+* Remove `"@typescript-eslint/no-explicit-any": "off"` in `.eslintrc.cjs`
+  and change code base accordingly
 
-* Fixed a crash when resizing browser window. (#301)
+* After linting is green, set `--max-warnings 0` in
+  `"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 100"`
 
-### Other changes
-
-* Changed the development environment for the `xcube-viewer` project 
-  from [create-react-app](https://create-react-app.dev/) and `yarn`
-  to [vite](https://vitejs.dev/) and `npm`. (#296)
-
 
 ## Changes in version 1.1.1
 
@@ -262,10 +259,8 @@
       },
       "headerIconStyle": {
         "color": "black"
-      },
-      ...
-    },
-    ...
+      }
+    }
   }
   ```
 

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 100",
     "preview": "vite preview",
     "test": "vitest",
     "coverage": "vitest run --coverage"

src/actions/controlActions.tsx

@@ -175,7 +175,7 @@ export function selectPlaceGroups(selectedPlaceGroupIds: string[] | null) {
         const dataset = selectedDatasetSelector(getState());
         const placeGroups = selectedDatasetSelectedPlaceGroupsSelector(getState());
         if (dataset !== null && placeGroups.length > 0) {
-            for (let placeGroup of placeGroups) {
+            for (const placeGroup of placeGroups) {
                 if (!isValidPlaceGroup(placeGroup)) {
                     const datasetId = dataset!.id;
                     const placeGroupId = placeGroup.id;

src/actions/dataActions.tsx

@@ -660,7 +660,7 @@ export function updateVariableVolume(
 //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 export function exportData() {
-    return (dispatch: Dispatch<UpdateVariableColorBar>, getState: () => AppState) => {
+    return (_dispatch: Dispatch<UpdateVariableColorBar>, getState: () => AppState) => {
         const {
             exportTimeSeries,
             exportTimeSeriesSeparator,
@@ -753,15 +753,18 @@ function _exportData(timeSeriesGroups: TimeSeriesGroup[],
                      placeGroups: PlaceGroup[],
                      options: ExportOptions) {
 
-    let {
+    const {
         includeTimeSeries,
-        separator,
         includePlaces,
-        fileName,
         placesAsCollection,
         zip,
     } = options;
 
+    let {
+        separator,
+        fileName,
+    } = options;
+
     separator = separator || 'TAB';
     if (separator.toUpperCase() === 'TAB') {
         separator = '\t';

src/actions/mapActions.tsx

@@ -32,7 +32,7 @@ import { MAP_OBJECTS } from '../states/controlState';
 
 
 // noinspection JSUnusedLocalSymbols
-export function renameUserPlaceInLayer(placeGroupId: string, placeId: string, newName: string) {
+export function renameUserPlaceInLayer(placeGroupId: string, _placeId: string, _newName: string) {
     if (MAP_OBJECTS[placeGroupId]) {
         // const userLayer = MAP_OBJECTS[placeGroupId] as OlVectorLayer;
         // const source = userLayer.getSource();

src/api/getDatasets.ts

@@ -44,10 +44,10 @@ function adjustTimeDimensionsForDataset(dataset: Dataset): Dataset {
         const index = dimensions.findIndex((dimension: Dimension) => dimension.name === 'time');
         if (index > -1) {
             const timeDimension = dimensions[index];
-            let timeCoordinates: any = timeDimension.coordinates;
+            const timeCoordinates: any = timeDimension.coordinates;
             if (timeCoordinates && timeCoordinates.length && typeof timeCoordinates[0] === 'string') {
-                let labels = timeCoordinates as string[];
-                let coordinates = labels.map((label: string) => new Date(label).getTime());
+                const labels = timeCoordinates as string[];
+                const coordinates = labels.map((label: string) => new Date(label).getTime());
                 dimensions = [...dimensions];
                 dimensions[index] = {...timeDimension, coordinates, labels} as TimeDimension;
                 return {...dataset, dimensions};

src/components/AddTimeSeriesButton.tsx

@@ -62,7 +62,7 @@ const AddTimeSeriesButton: React.FC<AddTimeSeriesButtonProps> = (
         addPlaceGroupTimeSeries(timeSeriesGroupId, timeSeries);
     };
 
-    let menuItems: React.ReactNode[] = [];
+    const menuItems: React.ReactNode[] = [];
     placeGroupTimeSeries.forEach(pgTs => {
         Object.getOwnPropertyNames(pgTs.timeSeries).forEach(propertyName => {
             const menuLabel = `${pgTs.placeGroup.title} / ${propertyName}`;

src/components/ColorBarCanvas.tsx

@@ -56,7 +56,7 @@ export const ColorBarCanvas: React.FC<ColorBarCanvasProps> = (
     }, [colorBar, opacity]);
 
     return <>
-        {Boolean(colorBar.imageData) ? (
+        {colorBar.imageData ? (
             <canvas
                 ref={canvasRef}
                 width={width || 240}

src/components/ColorBarLegend.tsx

@@ -167,13 +167,13 @@ export default function ColorBarLegend({
         setColorBarMinMaxAnchorEl(null);
     };
 
-    const handleColorBarMinMaxChange = (event: Event, value: number | number[]) => {
+    const handleColorBarMinMaxChange = (_event: Event, value: number | number[]) => {
         if (Array.isArray(value)) {
             setCurrentColorBarMinMax([value[0], value[1]]);
         }
     };
 
-    const handleColorBarMinMaxChangeCommitted = (event: Event | SyntheticEvent, value: number | number[]) => {
+    const handleColorBarMinMaxChangeCommitted = (_event: Event | SyntheticEvent, value: number | number[]) => {
         if (Array.isArray(value)) {
             updateVariableColorBar([value[0], value[1]], variableColorBarName, variableOpacity);
         }
@@ -212,7 +212,7 @@ export default function ColorBarLegend({
         );
     };
 
-    const handleVariableOpacity = (event: Event, value: number | number[]) => {
+    const handleVariableOpacity = (_event: Event, value: number | number[]) => {
         updateVariableColorBar(
             variableColorBarMinMax,
             variableColorBarName,
@@ -267,9 +267,9 @@ export default function ColorBarLegend({
         const distNorm = dist * Math.pow(10, -distExp);
 
         let numStepsInner = null;
-        for (let delta of [0.25, 0.2, 0.15, 0.125, 0.1]) {
-            let numStepsFloat = distNorm / delta;
-            let numStepsInt = Math.floor(numStepsFloat);
+        for (const delta of [0.25, 0.2, 0.15, 0.125, 0.1]) {
+            const numStepsFloat = distNorm / delta;
+            const numStepsInt = Math.floor(numStepsFloat);
             if (Math.abs(numStepsInt - numStepsFloat) < 1e-10) {
                 numStepsInner = numStepsInt;
                 break;
@@ -345,7 +345,7 @@ export default function ColorBarLegend({
     if (colorBarNameEditorOpen) {
         let key = 0;
         const entries = [];
-        for (let cbg of colorBars.groups) {
+        for (const cbg of colorBars.groups) {
             if (!cbg.names || cbg.names.length === 0) {
                 continue;
             }
@@ -356,7 +356,7 @@ export default function ColorBarLegend({
                     </Box>
                 </Tooltip>
             );
-            for (let name of cbg.names) {
+            for (const name of cbg.names) {
                 entries.push(
                     <Box
                         key={key++}

src/components/ControlBar.tsx

@@ -44,12 +44,14 @@ const styles = (theme: Theme) => createStyles(
 interface ControlBarProps extends WithStyles<typeof styles> {
 }
 
-const ControlBar: React.FC<ControlBarProps> = ({classes, children}) => {
+const _ControlBar: React.FC<ControlBarProps> = ({classes, children}) => {
     return (
         <form className={classes.form} autoComplete="off">
             {children}
         </form>
     );
 };
 
-export default withStyles(styles)(ControlBar);
+const ControlBar = withStyles(styles)(_ControlBar);
+
+export default ControlBar;

src/components/ControlBarActions.tsx

@@ -109,15 +109,15 @@ const ControlBarActions: React.FC<ControlBarActionsProps> = (
     );
 
     /*TODO: I18N*/
-    let volumeButton = Config.instance.branding.allow3D && (
+    const volumeButton = Config.instance.branding.allow3D && (
             <IconButton onClick={() => showVolumeCard(true)} disabled={volumeCardOpen} size="small">
                 <Tooltip arrow title={'Open volume panel (experimental!)'}>
                     {<VolumeIcon/>}
                 </Tooltip>
             </IconButton>
     );
 
-    let infoButton = (
+    const infoButton = (
         <IconButton onClick={() => showInfoCard(true)} disabled={infoCardOpen} size="small">
             <Tooltip arrow title={i18n.get('Open information panel')}>
                 {<InfoIcon/>}

src/components/InfoCard.tsx

@@ -140,7 +140,7 @@ const InfoCard: React.FC<InfoCardProps> = ({
         return null;
     }
 
-    const handleInfoElementsChanges = (event: React.MouseEvent<HTMLElement>, visibleElementTypes: string[]) => {
+    const handleInfoElementsChanges = (_event: React.MouseEvent<HTMLElement>, visibleElementTypes: string[]) => {
         setVisibleInfoCardElements(visibleElementTypes);
     };
 
@@ -430,7 +430,7 @@ const PlaceInfoContent: React.FC<PlaceInfoContentProps> = (
             <JsonCodeContent code={JSON.stringify(place, null, 2)}/>
         );
     } else if (viewMode === 'list') {
-        if (!!place.properties) {
+        if (place.properties) {
             const data: KeyValue[] = Object.getOwnPropertyNames(place.properties).map(
                 (name: any) => [name, place.properties![name]]
             );
@@ -496,7 +496,7 @@ const InfoCardContent: React.FC<InfoCardContentProps> = ({
                                                              children,
                                                          }) => {
 
-    const handleViewModeChange = (event: React.MouseEvent<HTMLElement>, viewMode: ViewMode) => {
+    const handleViewModeChange = (_event: React.MouseEvent<HTMLElement>, viewMode: ViewMode) => {
         setViewMode(viewMode);
     };
 
@@ -632,7 +632,7 @@ const PythonCodeContent: React.FC<CodeContentBaseProps> = ({code}) => {
 
 function selectObj(obj: any, keys: string[]): any {
     const newObj: { [name: string]: any } = {};
-    for (let key of keys) {
+    for (const key of keys) {
         if (key in obj) {
             newObj[key] = obj[key];
         }
@@ -662,7 +662,7 @@ function getDatasetPythonCode(serverConfig: ApiServerConfig,
 }
 
 
-function getVariablePythonCode(serverConfig: ApiServerConfig,
+function getVariablePythonCode(_serverConfig: ApiServerConfig,
                                variable: Variable,
                                time: Time | null) {
     const name = variable.name;

src/components/LegalAgreementDialog.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import Markdown from 'react-markdown';
 import { Theme } from "@mui/material";
 import Button from '@mui/material/Button';

src/components/MapInteractionsBar.tsx

@@ -57,7 +57,7 @@ interface MapInteractionsBarProps extends WithLocale {
 export default function MapInteractionsBar({mapInteraction, setMapInteraction}: MapInteractionsBarProps) {
     const classes = useStyles();
 
-    function handleChange(event: React.MouseEvent<HTMLElement>, value: MapInteraction | null) {
+    function handleChange(_event: React.MouseEvent<HTMLElement>, value: MapInteraction | null) {
         if (value !== null) {
             setMapInteraction(value);
         } else {

src/components/PlaceGroupsSelect.tsx

@@ -43,7 +43,7 @@ import i18n from '../i18n';
 
 
 // noinspection JSUnusedLocalSymbols
-const styles = (theme: Theme) => createStyles(
+const styles = (_theme: Theme) => createStyles(
     {
         select: {
             minWidth: '5em',

src/components/PlaceSelect.tsx

@@ -42,7 +42,7 @@ import ToolButton from "./ToolButton";
 
 
 // noinspection JSUnusedLocalSymbols
-const styles = (theme: Theme) => createStyles(
+const styles = (_theme: Theme) => createStyles(
     {
         select: {
             minWidth: '5em',

src/components/RadioSetting.tsx

@@ -47,7 +47,7 @@ const RadioSetting: React.FC<RadioSettingProps> = (
         disabled,
     }
 ) => {
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>, value: string) => {
+    const handleChange = (_event: React.ChangeEvent<HTMLInputElement>, value: string) => {
         updateSettings({...settings, [propertyName]: value});
     };
     return (

src/components/RgbSwitch.tsx

@@ -37,7 +37,7 @@ import { WithLocale } from '../util/lang';
 
 
 // noinspection JSUnusedLocalSymbols
-const styles = (theme: Theme) => createStyles(
+const styles = (_theme: Theme) => createStyles(
     {});
 
 interface RgbSwitchProps extends WithStyles<typeof styles>, WithLocale {

src/components/SettingsDialog.tsx

@@ -122,7 +122,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
     }
 
     let localeMenuItems = null;
-    if (Boolean(languageMenuAnchor)) {
+    if (languageMenuAnchor) {
         localeMenuItems = Object.getOwnPropertyNames(i18n.languages).map(langLocale => {
             const langName = i18n.languages[langLocale];
             return (
@@ -146,7 +146,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
     }
 
     let baseMapMenuItems: null | React.ReactElement[] = null;
-    if (Boolean(baseMapMenuAnchor)) {
+    if (baseMapMenuAnchor) {
         baseMapMenuItems = [];
         maps.forEach((mapGroup: MapGroup, i: number) => {
             baseMapMenuItems!.push(<ListSubheader key={i} disableSticky={true}>{mapGroup.name}</ListSubheader>);

src/components/SettingsSubPanel.tsx

@@ -59,7 +59,7 @@ const SettingsSubPanel: React.FC<SettingsSubPanelProps> = (
         );
     }
 
-    if (!!onClick) {
+    if (onClick) {
         return (
             <ListItem style={listItemStyle} button onClick={onClick}>
                 {listItemText}