From 42d7b642bde167a064334620f43461ffa6ea9dc1 Mon Sep 17 00:00:00 2001
From: Marc Lichtman <marcll@vt.edu>
Date: Sun, 26 May 2024 02:23:21 -0400
Subject: [PATCH] Misc client cleanups (#880)

* make windowfunctions into for loop

* zoom levels

* cleanups

* hide one of the two GET plugin errors

* comment out reportWebVitals console log

* autocomplete attribute warning
---
 client/src/api/plugin/queries.tsx             |  5 +-
 client/src/index.tsx                          |  4 +-
 .../src/pages/browser/custom-azure-form.tsx   |  1 +
 .../components/settings-pane.tsx              | 61 ++++++-------------
 .../hooks/use-spectrogram-context.tsx         |  6 +-
 5 files changed, 28 insertions(+), 49 deletions(-)

diff --git a/client/src/api/plugin/queries.tsx b/client/src/api/plugin/queries.tsx
index 8c46c2735..6e24aaf8b 100644
--- a/client/src/api/plugin/queries.tsx
+++ b/client/src/api/plugin/queries.tsx
@@ -27,7 +27,10 @@ export function useGetPlugin(plugin: PluginDefinition) {
   return useQuery<string[]>(
     ['plugin', plugin.name],
     async () => {
-      const response = await axios.get<string[]>(plugin.url);
+      const response = await axios.get<string[]>(plugin.url).catch((err) => {
+        console.info('Plugin server ' + plugin.url + ' not reachable');
+        return { data: [] };
+      });
       // make sure we only return in case of a string array
       if (!Array.isArray(response.data)) throw new Error(`Plugin ${plugin.name} does not return a string array`);
       return response.data;
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 37a284c24..c00d900bf 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -42,5 +42,5 @@ root.render(
   </QueryClientProvider>
 );
 
-// If you want to start measuring performance in your app, pass a function to log results (for example: reportWebVitals(console.log)) or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals(console.log);
+// For measuring performance uncomment the following.  see https://create-react-app.dev/docs/measuring-performance/
+//reportWebVitals(console.log);
diff --git a/client/src/pages/browser/custom-azure-form.tsx b/client/src/pages/browser/custom-azure-form.tsx
index dff584a5d..846824b54 100644
--- a/client/src/pages/browser/custom-azure-form.tsx
+++ b/client/src/pages/browser/custom-azure-form.tsx
@@ -120,6 +120,7 @@ export const CustomAzureForm = ({
             placeholder="SAS Token (optional)"
             onChange={onSasTokenChange}
             className="input input-bordered input-success w-full max-w-xs mb-2 pl-2"
+            autoComplete="off"
           />
           <button className="" onClick={onCustomAzureSubmit} id="AzureBlob">
             Browse
diff --git a/client/src/pages/recording-view/components/settings-pane.tsx b/client/src/pages/recording-view/components/settings-pane.tsx
index a2386e121..369ca28e4 100644
--- a/client/src/pages/recording-view/components/settings-pane.tsx
+++ b/client/src/pages/recording-view/components/settings-pane.tsx
@@ -8,13 +8,13 @@ import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import DualRangeSlider from '@/features/ui/dual-range-slider/DualRangeSlider';
-import { COLORMAP_DEFAULT } from '@/utils/constants';
 import { colMaps } from '@/utils/colormap';
 import { useSpectrogramContext } from '../hooks/use-spectrogram-context';
 import { useCursorContext } from '../hooks/use-cursor-context';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 interface SettingsPaneProps {
   currentFFT: number;
@@ -22,6 +22,8 @@ interface SettingsPaneProps {
 
 const SettingsPane = ({ currentFFT }) => {
   const fftSizes = [64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 32768, 65536];
+  const zoomLevels = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+  const windowFunctions = ['hamming', 'rectangle', 'hanning', 'barlett', 'blackman'];
   const context = useSpectrogramContext();
   const cursorContext = useCursorContext();
   const [localPythonSnippet, setLocalPythonSnippet] = useState(context.pythonSnippet);
@@ -58,14 +60,11 @@ const SettingsPane = ({ currentFFT }) => {
     updateTaps(taps_string);
   };
 
-  const onPressSaveButton = (e) => {
-    console.log(context.meta);
+  const onPressDownloadSelectedSamples = (e) => {
     // Grab metadata and remove the parts that shouldn't be included in the metafile
     let metaClone = JSON.parse(JSON.stringify(context.meta));
     delete metaClone['dataClient'];
     const a = document.createElement('a');
-
-    // Return with the download of the blob
     const blobUrl = window.URL.createObjectURL(
       new Blob([cursorContext.cursorData], { type: 'application/octet-stream' })
     );
@@ -73,35 +72,18 @@ const SettingsPane = ({ currentFFT }) => {
     a.download = 'trimmedSamples.sigmf-data';
     a.click();
     window.URL.revokeObjectURL(blobUrl);
-
     a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(metaClone, null, 2));
     a.download = 'trimmedSamples.sigmf-meta';
     a.click();
-
-    document.body.removeChild(a);
+    a.remove(); // remove element from dom
   };
 
-  function calcZoomStepSizes() {
-    /*
-      What we're doing here is calculating the number of ffts we
-      skip per image line in order to show N% of the total
-      file in the spectrogram. The first element in the
-      array is special, don't skip
-    */
-
-    const fftSize = context.fftSize;
-    const imageHeight = context.spectrogramHeight;
-    const totalSamples = context.meta.getTotalSamples();
-    const onePercent = totalSamples / fftSize / 100;
-
-    const zoomLevels = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
-    return zoomLevels.map((z) => Math.floor((onePercent * z) / imageHeight));
-  }
-
-  const zoomStepSizes = calcZoomStepSizes();
+  // Calculate number of ffts we skip per image line in order to show N% of the total file in the spectrogram. The first element in the array is special, don't skip
+  const onePercent = context.meta.getTotalSamples() / context.fftSize / 100;
+  const zoomStepSizes = zoomLevels.map((z) => Math.floor((onePercent * z) / context.spectrogramHeight));
 
   const onChangePythonSnippet = useCallback(
-    (value, viewUpdate) => {
+    (value: string) => {
       setLocalPythonSnippet(value);
     },
     [localPythonSnippet]
@@ -164,7 +146,7 @@ const SettingsPane = ({ currentFFT }) => {
 
       <button
         className="mb-3"
-        onClick={onPressSaveButton}
+        onClick={onPressDownloadSelectedSamples}
         style={{ width: '100%', marginTop: '5px' }}
         disabled={!context.canDownload}
       >
@@ -244,6 +226,7 @@ const SettingsPane = ({ currentFFT }) => {
               </a>
             </span>
           </label>
+
           <div className="mt-2 flex">
             <input
               type="text"
@@ -254,7 +237,7 @@ const SettingsPane = ({ currentFFT }) => {
               }}
             />
             <button className="rounded-none rounded-r" onClick={onSubmitTaps}>
-              <FontAwesomeIcon icon={faArrowRight} />
+              <FontAwesomeIcon icon={faArrowRight as IconProp} />
             </button>
           </div>
         </div>
@@ -290,21 +273,11 @@ const SettingsPane = ({ currentFFT }) => {
             Window <ArrowRightIcon />
           </label>
           <ul className="p-2 shadow menu dropdown-content z-[1] mt-0 bg-base-100 rounded-box w-70">
-            <li key={0} data-value="hamming" onClick={onChangeWindowFunction}>
-              {context.windowFunction === 'hamming' ? <a className="active">Hamming</a> : <a>Hamming</a>}
-            </li>
-            <li key={1} data-value="rectangle" onClick={onChangeWindowFunction}>
-              {context.windowFunction === 'rectangle' ? <a className="active">Rectangle</a> : <a>Rectangle</a>}
-            </li>
-            <li key={2} data-value="hanning" onClick={onChangeWindowFunction}>
-              {context.windowFunction === 'hanning' ? <a className="active">Hanning</a> : <a>Hanning</a>}
-            </li>
-            <li key={3} data-value="barlett" onClick={onChangeWindowFunction}>
-              {context.windowFunction === 'barlett' ? <a className="active">Barlett</a> : <a>Barlett</a>}
-            </li>
-            <li key={4} data-value="blackman" onClick={onChangeWindowFunction}>
-              {context.windowFunction === 'blackman' ? <a className="active">Blackman</a> : <a>Blackman</a>}
-            </li>
+            {windowFunctions.map((value) => (
+              <li key={value} data-value={value} onClick={onChangeWindowFunction}>
+                <a className={'capitalize ' + (context.windowFunction === value && 'bg-primary text-black')}>{value}</a>
+              </li>
+            ))}
           </ul>
         </div>
       </div>
diff --git a/client/src/pages/recording-view/hooks/use-spectrogram-context.tsx b/client/src/pages/recording-view/hooks/use-spectrogram-context.tsx
index 6c87893e0..8e42d77fc 100644
--- a/client/src/pages/recording-view/hooks/use-spectrogram-context.tsx
+++ b/client/src/pages/recording-view/hooks/use-spectrogram-context.tsx
@@ -3,6 +3,7 @@ import { useMeta } from '@/api/metadata/queries';
 import { INITIAL_PYTHON_SNIPPET } from '@/utils/constants';
 import { SigMFMetadata } from '@/utils/sigmfMetadata';
 import React, { createContext, useContext, useEffect, useState } from 'react';
+import { COLORMAP_DEFAULT } from '@/utils/constants';
 
 interface SpectrogramContextProperties {
   type: string;
@@ -43,6 +44,7 @@ interface SpectrogramContextProperties {
 
 export const SpectrogramContext = createContext<SpectrogramContextProperties>(null);
 
+// Initial settings
 export function SpectrogramContextProvider({
   children,
   type,
@@ -52,8 +54,8 @@ export function SpectrogramContextProvider({
   seedValues = {
     magnitudeMin: -30,
     magnitudeMax: 5,
-    colmap: 'viridis',
-    windowFunction: 'hann',
+    colmap: COLORMAP_DEFAULT,
+    windowFunction: 'rectangle',
     fftSize: 1024,
     spectrogramHeight: 800,
     spectrogramWidth: 1024,