From ce55f3209d603d12866b3f14048dbddf5faafd86 Mon Sep 17 00:00:00 2001
From: Matthias Lindinger <matthias.lindinger@bsb-muenchen.de>
Date: Tue, 4 Jun 2024 09:15:37 +0200
Subject: [PATCH] Fix many linting issues

---
 .../components/MiradorTextOverlay.test.js     |  2 +-
 __tests__/components/OverlaySettings.test.js  |  8 ++++----
 __tests__/components/PageTextDisplay.test.js  | 12 ++++++------
 __tests__/lib/ocrFormats.test.js              |  4 ++--
 __tests__/state/sagas.test.js                 |  4 ++--
 src/components/MiradorTextOverlay.js          | 16 ++++------------
 src/components/PageTextDisplay.js             | 14 ++++++++++----
 src/components/settings/ButtonContainer.js    |  4 ++--
 src/components/settings/ColorInput.js         |  4 ++--
 src/components/settings/ColorWidget.js        | 14 +++-----------
 src/components/settings/OpacityWidget.js      |  4 ++--
 src/components/settings/OverlaySettings.js    |  8 ++++----
 src/lib/color.js                              |  2 +-
 src/lib/ocrFormats.js                         |  4 ++--
 src/state/sagas.js                            | 19 +++++++++----------
 src/state/selectors.js                        |  4 ++--
 16 files changed, 56 insertions(+), 67 deletions(-)

diff --git a/__tests__/components/MiradorTextOverlay.test.js b/__tests__/components/MiradorTextOverlay.test.js
index 24107cc..2d499ce 100644
--- a/__tests__/components/MiradorTextOverlay.test.js
+++ b/__tests__/components/MiradorTextOverlay.test.js
@@ -125,7 +125,7 @@ describe('MiradorTextOverlay', () => {
     } = renderOverlay({ pageTexts });
     viewer.handlers['update-viewport']();
     const overlays = Array.of(...viewer.canvas.querySelectorAll('div > svg:first-of-type')).map(
-      (e) => e.parentElement
+      (e) => e.parentElement,
     );
     expect(overlays[0]).toHaveStyle({
       transform: 'translate(52.95000000000001px, 72.9px) scale(1.33)',
diff --git a/__tests__/components/OverlaySettings.test.js b/__tests__/components/OverlaySettings.test.js
index 1dc3d03..bea8065 100644
--- a/__tests__/components/OverlaySettings.test.js
+++ b/__tests__/components/OverlaySettings.test.js
@@ -22,14 +22,14 @@ const mockTheme = {
 
 // Mocked MUI slider for easier testing, taken from
 // https://stackoverflow.com/a/61628815 (CC BY-SA 4.0)
-jest.mock('@material-ui/core/Slider', () => (props) => {
+jest.mock('@material-ui/core/Slider', () => function(props) {
   const { id, name, min, max, onChange } = props;
   return (
     <input
       data-testid="opacity-slider"
       type="range"
       id={id}
-      name={name}
+      name=
       min={min}
       max={max}
       onChange={(event) => onChange(event, event.target.value)}
@@ -67,7 +67,7 @@ function renderSettings(props = {}, renderFn = render) {
         {...props}
         windowTextOverlayOptions={options}
       />
-    </ThemeProvider>
+    </ThemeProvider>,
   );
   return { rerender, options, updateOptionsMock };
 }
@@ -209,7 +209,7 @@ describe('TextOverlaySettingsBubble', () => {
   it('should be positioned lower if mirador-image-tools is enabled', () => {
     renderSettings({ imageToolsEnabled: true });
     expect(
-      screen.getByLabelText('expandTextOverlayOptions').parentElement.parentElement
+      screen.getByLabelText('expandTextOverlayOptions').parentElement.parentElement,
     ).toHaveStyle('top: 66px');
   });
 
diff --git a/__tests__/components/PageTextDisplay.test.js b/__tests__/components/PageTextDisplay.test.js
index 8ea4a3e..83b4347 100644
--- a/__tests__/components/PageTextDisplay.test.js
+++ b/__tests__/components/PageTextDisplay.test.js
@@ -66,11 +66,11 @@ describe('PageTextDisplay', () => {
     renderPage({ visible: false });
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0);'
+      'fill: rgba(0, 0, 0, 0);',
     );
     expect(screen.getByText(svgTextMatcher('another secondWord on another line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0);'
+      'fill: rgba(0, 0, 0, 0);',
     );
   });
 
@@ -78,12 +78,12 @@ describe('PageTextDisplay', () => {
     const { rerender } = renderPage();
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.75);'
+      'fill: rgba(0, 0, 0, 0.75);',
     );
     renderPage({ opacity: 0.25 }, rerender);
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.75);'
+      'fill: rgba(0, 0, 0, 0.75);',
     );
   });
 
@@ -92,11 +92,11 @@ describe('PageTextDisplay', () => {
     expect(screen.getByText(svgTextMatcher('a firstWord on a line'))).not.toBeNull();
     renderPage(
       { source: 'http://example.com/pages/2', lines: lineFixtures.withoutSpans, opacity: 0.25 },
-      rerender
+      rerender,
     );
     expect(screen.getByText('a word on a line')).toHaveAttribute(
       'style',
-      'fill: rgba(0, 0, 0, 0.25);'
+      'fill: rgba(0, 0, 0, 0.25);',
     );
   });
 
diff --git a/__tests__/lib/ocrFormats.test.js b/__tests__/lib/ocrFormats.test.js
index cab5b17..a347c07 100644
--- a/__tests__/lib/ocrFormats.test.js
+++ b/__tests__/lib/ocrFormats.test.js
@@ -11,7 +11,7 @@ import contentAsTextAnnos from '../../__fixtures__/anno_iifv2.json';
  * https://stackoverflow.com/a/53464807 (CC-BY-SA)
  */
 const closeTo = (expected, precision = 1) => ({
-  asymmetricMatch: (actual) => Math.abs(expected - actual) < Math.pow(10, -precision) / 2,
+  asymmetricMatch: (actual) => Math.abs(expected - actual) < 10 ** -precision / 2,
 });
 
 describe('parsing ALTO', () => {
@@ -49,7 +49,7 @@ describe('parsing ALTO', () => {
 
   it('should convert style nodes to proper CSS', () => {
     expect(parsed.lines[96].spans[16].style).toBe(
-      'font-family: Times New Roman;font-style: italic'
+      'font-family: Times New Roman;font-style: italic',
     );
   });
 });
diff --git a/__tests__/state/sagas.test.js b/__tests__/state/sagas.test.js
index b4ce879..b1d17d7 100644
--- a/__tests__/state/sagas.test.js
+++ b/__tests__/state/sagas.test.js
@@ -222,7 +222,7 @@ describe('Fetching external annotation sources', () => {
       .put(
         receiveAnnotation(targetId, annotationId, {
           resources: [{ resource: simpleExternalContent }],
-        })
+        }),
       )
       .run());
 
@@ -245,7 +245,7 @@ describe('Fetching external annotation sources', () => {
               },
             },
           ],
-        })
+        }),
       )
       .run());
 
diff --git a/src/components/MiradorTextOverlay.js b/src/components/MiradorTextOverlay.js
index cd6348f..0a3b419 100644
--- a/src/components/MiradorTextOverlay.js
+++ b/src/components/MiradorTextOverlay.js
@@ -29,16 +29,8 @@ class MiradorTextOverlay extends Component {
 
   /** Register OpenSeadragon callback when viewport changes */
   componentDidUpdate(prevProps) {
-    const {
-      enabled,
-      viewer,
-      pageTexts,
-      textColor,
-      bgColor,
-      useAutoColors,
-      visible,
-      selectable,
-    } = this.props;
+    const { enabled, viewer, pageTexts, textColor, bgColor, useAutoColors, visible, selectable } =
+      this.props;
     let { opacity } = this.props;
 
     this.patchAnnotationOverlay();
@@ -152,7 +144,7 @@ class MiradorTextOverlay extends Component {
       this.renderRefs[itemNo].current.updateTransforms(
         img.viewportToImageZoom(viewportZoom),
         vpBounds.x * canvasWorldScale - canvasWorldOffset,
-        vpBounds.y * canvasWorldScale
+        vpBounds.y * canvasWorldScale,
       );
     }
   }
@@ -272,7 +264,7 @@ class MiradorTextOverlay extends Component {
           );
         })}
       </div>,
-      viewer.canvas
+      viewer.canvas,
     );
   }
 }
diff --git a/src/components/PageTextDisplay.js b/src/components/PageTextDisplay.js
index 8a6ad9c..bbd9055 100644
--- a/src/components/PageTextDisplay.js
+++ b/src/components/PageTextDisplay.js
@@ -172,16 +172,22 @@ class PageTextDisplay extends React.Component {
      * how to render lines and spans, sorry :-/ */
     const isGecko = runningInGecko();
     // eslint-disable-next-line require-jsdoc
-    let LineWrapper = ({ children }) => <text style={textStyle}>{children}</text>;
+    function LineWrapper({ children }) {
+      return <text style={textStyle}>{children}</text>;
+    }
     // eslint-disable-next-line react/jsx-props-no-spreading, require-jsdoc
-    let SpanElem = (props) => <tspan {...props} />;
+    function SpanElem(props) {
+      return <tspan {...props} />;
+    }
     if (isGecko) {
       // NOTE: Gecko really works best with a flattened bunch of text nodes. Wrapping the
       //       lines in a <g>, e.g. breaks text selection in similar ways to the below
       //       WebKit-specific note, for some reason ¯\_(ツ)_/¯
       LineWrapper = React.Fragment;
       // eslint-disable-next-line react/jsx-props-no-spreading, require-jsdoc
-      SpanElem = (props) => <text style={textStyle} {...props} />;
+      SpanElem = function (props) {
+        return <text style={textStyle} {...props} />;
+      };
     }
     return (
       <div ref={this.containerRef} style={containerStyle}>
@@ -244,7 +250,7 @@ class PageTextDisplay extends React.Component {
                 >
                   {line.text}
                 </text>
-              )
+              ),
             )}
           </g>
         </svg>
diff --git a/src/components/settings/ButtonContainer.js b/src/components/settings/ButtonContainer.js
index 4a5aa80..557d2cb 100644
--- a/src/components/settings/ButtonContainer.js
+++ b/src/components/settings/ButtonContainer.js
@@ -34,10 +34,10 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Container for a settings button */
-const ButtonContainer = ({ children, withBorder, paddingPrev, paddingNext }) => {
+function ButtonContainer({ children, withBorder, paddingPrev, paddingNext }) {
   const classes = useStyles({ withBorder, paddingPrev, paddingNext });
   return <div className={classes.root}>{children}</div>;
-};
+}
 ButtonContainer.propTypes = {
   children: PropTypes.node.isRequired,
   withBorder: PropTypes.bool,
diff --git a/src/components/settings/ColorInput.js b/src/components/settings/ColorInput.js
index 7de2906..b25104c 100644
--- a/src/components/settings/ColorInput.js
+++ b/src/components/settings/ColorInput.js
@@ -37,7 +37,7 @@ const useStyles = makeStyles({
 });
 
 /** Input to select a color */
-const ColorInput = ({ color, onChange, title, autoColors, className }) => {
+function ColorInput({ color, onChange, title, autoColors, className }) {
   const classes = useStyles({ color, autoColors });
   // We rely on the browser behavior that clicking on an input's label is equivalent
   // to clicking the input to show a custom color picker button.
@@ -65,7 +65,7 @@ const ColorInput = ({ color, onChange, title, autoColors, className }) => {
       />
     </label>
   );
-};
+}
 ColorInput.propTypes = {
   className: PropTypes.string,
   color: PropTypes.string.isRequired,
diff --git a/src/components/settings/ColorWidget.js b/src/components/settings/ColorWidget.js
index 392a086..b011271 100644
--- a/src/components/settings/ColorWidget.js
+++ b/src/components/settings/ColorWidget.js
@@ -57,15 +57,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Widget to update text and background color */
-const ColorWidget = ({
-  textColor,
-  bgColor,
-  onChange,
-  t,
-  pageColors,
-  useAutoColors,
-  containerId,
-}) => {
+function ColorWidget({ textColor, bgColor, onChange, t, pageColors, useAutoColors, containerId }) {
   const showResetButton =
     !useAutoColors && pageColors && pageColors.some((c) => c && (c.textColor || c.bgColor));
   const classes = useStyles({ showResetButton });
@@ -118,7 +110,7 @@ const ColorWidget = ({
       />
     </div>
   );
-};
+}
 ColorWidget.propTypes = {
   containerId: PropTypes.string.isRequired,
   textColor: PropTypes.string.isRequired,
@@ -130,7 +122,7 @@ ColorWidget.propTypes = {
     PropTypes.shape({
       textColor: PropTypes.string,
       bgColor: PropTypes.string,
-    })
+    }),
   ).isRequired,
 };
 
diff --git a/src/components/settings/OpacityWidget.js b/src/components/settings/OpacityWidget.js
index 3e2a3e0..f3bb383 100644
--- a/src/components/settings/OpacityWidget.js
+++ b/src/components/settings/OpacityWidget.js
@@ -33,7 +33,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Widget to control the opacity of the displayed text */
-const OpacityWidget = ({ opacity, onChange, t }) => {
+function OpacityWidget({ opacity, onChange, t }) {
   const classes = useStyles();
   const theme = useTheme();
   const isSmallDisplay = useMediaQuery(theme.breakpoints.down('sm'));
@@ -54,7 +54,7 @@ const OpacityWidget = ({ opacity, onChange, t }) => {
       />
     </div>
   );
-};
+}
 OpacityWidget.propTypes = {
   opacity: PropTypes.number.isRequired,
   onChange: PropTypes.func.isRequired,
diff --git a/src/components/settings/OverlaySettings.js b/src/components/settings/OverlaySettings.js
index 6014558..ec634e6 100644
--- a/src/components/settings/OverlaySettings.js
+++ b/src/components/settings/OverlaySettings.js
@@ -46,7 +46,7 @@ const useStyles = makeStyles(({ palette, breakpoints }) => {
 });
 
 /** Control text overlay settings  */
-const OverlaySettings = ({
+function OverlaySettings({
   windowTextOverlayOptions,
   imageToolsEnabled,
   textsAvailable,
@@ -55,7 +55,7 @@ const OverlaySettings = ({
   t,
   pageColors,
   containerId,
-}) => {
+}) {
   const {
     enabled,
     visible,
@@ -221,7 +221,7 @@ const OverlaySettings = ({
       {!isSmallDisplay && toggleButton}
     </div>
   );
-};
+}
 
 OverlaySettings.propTypes = {
   containerId: PropTypes.string.isRequired,
@@ -236,7 +236,7 @@ OverlaySettings.propTypes = {
     PropTypes.shape({
       textColor: PropTypes.string,
       bgColor: PropTypes.string,
-    })
+    }),
   ).isRequired,
 };
 
diff --git a/src/lib/color.js b/src/lib/color.js
index 7e09e61..c08418c 100644
--- a/src/lib/color.js
+++ b/src/lib/color.js
@@ -35,7 +35,7 @@ function luminance([r, g, b]) {
     if (vSrgb <= 0.03928) {
       return vSrgb / 12.92;
     }
-    return Math.pow((vSrgb + 0.055) / 1.055, 2.4);
+    return ((vSrgb + 0.055) / 1.055) ** 2.4;
   });
   return colors[0] * 0.2126 + colors[1] * 0.7152 + colors[2] * 0.0722;
 }
diff --git a/src/lib/ocrFormats.js b/src/lib/ocrFormats.js
index 9a0eba4..f61f886 100644
--- a/src/lib/ocrFormats.js
+++ b/src/lib/ocrFormats.js
@@ -80,7 +80,7 @@ export function parseHocr(hocrText, referenceSize) {
     const scaledHeight = Math.round(scaleFactorX * pageSize[3]);
     if (scaledWidth !== referenceSize.width || scaledHeight !== referenceSize.height) {
       console.warn(
-        `Differing scale factors for x and y axis: x=${scaleFactorX}, y=${scaleFactorY}`
+        `Differing scale factors for x and y axis: x=${scaleFactorX}, y=${scaleFactorY}`,
       );
     }
     scaleFactor = scaleFactorX;
@@ -350,7 +350,7 @@ export function parseIiifAnnotations(annos, imgSize) {
   const lineAnnos = annos.filter(
     (anno) =>
       anno.textGranularity === 'line' || // IIIF Text Granularity
-      anno.dcType === 'Line' // Europeana
+      anno.dcType === 'Line', // Europeana
   );
   const targetAnnos = lineAnnos.length > 0 ? lineAnnos : annos;
   const boxes = targetAnnos.map((anno) => {
diff --git a/src/state/sagas.js b/src/state/sagas.js
index 22319f5..fcbca17 100644
--- a/src/state/sagas.js
+++ b/src/state/sagas.js
@@ -76,9 +76,8 @@ export function* discoverExternalOcr({ visibleCanvases: visibleCanvasIds, window
   // seem to do anything :-/
   for (const canvas of visibleCanvases) {
     const { width, height } = canvas.__jsonld;
-    const seeAlso = (Array.isArray(canvas.__jsonld.seeAlso)
-      ? canvas.__jsonld.seeAlso
-      : [canvas.__jsonld.seeAlso]
+    const seeAlso = (
+      Array.isArray(canvas.__jsonld.seeAlso) ? canvas.__jsonld.seeAlso : [canvas.__jsonld.seeAlso]
     ).filter((res) => isAlto(res) || isHocr(res))[0];
     if (seeAlso !== undefined) {
       const ocrSource = seeAlso['@id'];
@@ -129,7 +128,7 @@ export function* fetchExternalAnnotationResources({ targetId, annotationId, anno
     return;
   }
   const resourceUris = uniq(
-    annotationJson.resources.map((anno) => anno.resource['@id'].split('#')[0])
+    annotationJson.resources.map((anno) => anno.resource['@id'].split('#')[0]),
   );
   const contents = yield all(resourceUris.map((uri) => call(fetchAnnotationResource, uri)));
   const contentMap = Object.fromEntries(contents.map((c) => [c.id ?? c['@id'], c]));
@@ -148,7 +147,7 @@ export function* fetchExternalAnnotationResources({ targetId, annotationId, anno
     return { ...anno, resource: { ...anno.resource, value: partialContent } };
   });
   yield put(
-    receiveAnnotation(targetId, annotationId, { ...annotationJson, resources: completedAnnos })
+    receiveAnnotation(targetId, annotationId, { ...annotationJson, resources: completedAnnos }),
   );
 }
 
@@ -160,7 +159,7 @@ export function* processTextsFromAnnotations({ targetId, annotationId, annotatio
     (anno) =>
       anno.motivation === 'supplementing' || // IIIF 3.0
       anno.resource['@type']?.toLowerCase() === 'cnt:contentastext' || // IIIF 2.0
-      ['Line', 'Word'].indexOf(anno.dcType) >= 0 // Europeana IIIF 2.0
+      ['Line', 'Word'].indexOf(anno.dcType) >= 0, // Europeana IIIF 2.0
   );
 
   if (contentAsTextAnnos.length > 0) {
@@ -178,7 +177,7 @@ export function* onConfigChange({ payload, id: windowId }) {
   const texts = yield select(getTextsForVisibleCanvases, { windowId });
   // Check if any of the texts need fetching
   const needFetching = texts.filter(
-    ({ sourceType, text }) => sourceType === 'ocr' && text === undefined
+    ({ sourceType, text }) => sourceType === 'ocr' && text === undefined,
   );
   // Check if we need to discover external OCR
   const needsDiscovery =
@@ -191,7 +190,7 @@ export function* onConfigChange({ payload, id: windowId }) {
     needFetching.map(({ canvasId, source }) => {
       const { width, height } = visibleCanvases.find((c) => c.id === canvasId).__jsonld;
       return put(requestText(canvasId, source, { height, width }));
-    })
+    }),
   );
   if (needsDiscovery) {
     const canvasIds = visibleCanvases.map((c) => c.id);
@@ -204,7 +203,7 @@ export function* injectTranslations() {
   yield put(
     updateConfig({
       translations,
-    })
+    }),
   );
 }
 
@@ -232,7 +231,7 @@ export function* fetchColors({ targetId, infoId }) {
     const { success: infoSuccess, failure: infoFailure } = yield race({
       success: take((a) => a.type === ActionTypes.RECEIVE_INFO_RESPONSE && a.infoId === infoId),
       failure: take(
-        (a) => a.type === ActionTypes.RECEIVE_INFO_RESPONSE_FAILURE && a.infoId === infoId
+        (a) => a.type === ActionTypes.RECEIVE_INFO_RESPONSE_FAILURE && a.infoId === infoId,
       ),
     });
     if (infoFailure) {
diff --git a/src/state/selectors.js b/src/state/selectors.js
index bbb5e54..1c3f88b 100644
--- a/src/state/selectors.js
+++ b/src/state/selectors.js
@@ -27,7 +27,7 @@ export const getWindowTextOverlayOptions = createSelector(
     fontFamily,
     ...defaultConfig,
     ...(textOverlay ?? {}),
-  })
+  }),
 );
 
 /** Selector to get all loaded texts */
@@ -43,5 +43,5 @@ export const getTextsForVisibleCanvases = createSelector(
       return [];
     }
     return texts;
-  }
+  },
 );